import React from 'react';
import './selectedPanel.scss'
import Tag from './Tag';
import utils from '@beisen-phoenix/common-utils';
const classes = utils.BEMClass('lookup');
interface Item {
  value: string | number
  label: string
}
interface SelectedPanelProps {
  maxSize?: number;
  data?: Array<Item>
  translation: {clearSelected: string, selected: string, emptyMsg: string}
  onClearAll?: () => void
  onClearItem?: (item: Item) => void
}

export default class SelectedPanel extends React.PureComponent<SelectedPanelProps, any> {
  static defaultProps = {
		translation: {clearSelected: "清空已选",selected: "已选", emptyMsg: "请在左侧选择内容"}
  }

  componentDidUpdate (prevProps, prevState) {
    const { data = [] } = this.props
    if (data.length > prevProps.data.length) {
      let tagsWrp = document.querySelector('.phoenix-lookup__tagsWrapper')
      if (tagsWrp) {
          tagsWrp.scrollTop = tagsWrp.scrollHeight
      }
    }
  }

  render() {
    const { translation,data = [],onClearAll,onClearItem, maxSize } = this.props;
    return (
      <div className={classes({element: 'selectedWrapper'})} >
        <div className={classes({element: 'selectedInfo'})}>
          <span>{`${translation.selected}`}</span>
          <span className={classes({element: 'selectedTotal'})}>{data.length}</span>
            {maxSize ? <span className={classes({element: 'selectedLimit'})}>/{maxSize}</span> : null}
          <span onClick={onClearAll} className={classes({element: 'clearSelected',modifiers: {active: data.length > 0}})}>{translation.clearSelected}</span>
        </div>
        <div className={classes({element: 'tagsWrapper'})}>
          {
            data && data.length>0 ?
              data.map((item, index) => {
                return <Tag item={item} key={index} extraCls={classes({element: 'tagItem'})} onClear={onClearItem} />
              })
            : <div className={classes({element: 'emptyMsg'})}>{ translation.emptyMsg }</div>
          }
        </div>
      </div>
    );
  }
}