import React from 'react';
import Circle from '@beisen-phoenix/icon/lib/circle';
import ToolTip from '@beisen-phoenix/tooltip';
import { $M4, $M5 } from '@beisen-phoenix/style-token';
import { Item } from './PropsInterface';
import utils from '@beisen-phoenix/common-utils';
const classes = utils.BEMClass('select');
import './index.scss';

interface TagsProps {
  onClick?: Function;
  item: Item;
  selectDisabled?: boolean;
  size?: 'small' | 'normal' | 'large';
}

export default class Tags extends React.PureComponent<TagsProps, any> {
  private tagSpanRef: React.RefObject<HTMLSpanElement> = React.createRef();

  state = {
    hover: false
  };

  onMouseEnter = () => {
    this.setState({
      hover: true
    });
  };

  onMouseLeave = () => {
    this.setState({
      hover: false
    });
  };

  render() {
    const { onClick, item, selectDisabled,size } = this.props;
    const { hover } = this.state;
    const { disabled: itemDisabled, label } = item;

    const TempCommponent = <span ref={this.tagSpanRef} className={classes({element: "tag",modifiers: {safari: utils.Browser.SAFARI}})}>{label}</span>;

    return (
      <li className={classes({element: "tagItem", modifiers: {itemDisabled,selectDisabled,small: size === 'small'}})}>       
        <ToolTip title={label} showOverflowTooltip={true}>
          {TempCommponent}
        </ToolTip>

        {selectDisabled || itemDisabled ? null : (
          <span className={classes({element: "tagIcon"})}>
            <Circle
              color={hover && !selectDisabled ? $M4 : $M5}
              onClick={e => {
                onClick && !selectDisabled && onClick(item);
                ``;
                e.stopPropagation && e.stopPropagation();
              }}
              onMouseEnter={this.onMouseEnter}
              onMouseLeave={this.onMouseLeave}
            />
          </span>
        )}
      </li>
    );
  }
}