import React from 'react';
import ToolTip from '@beisen-phoenix/tooltip';
import { OptionsType } from './DlList';
import './style/DdItem.scss';
import utils from '@beisen-phoenix/common-utils';
const classes = utils.BEMClass('groupSingleSelect');

export interface DdItemProps {
  active: Boolean,
  font: 'small' | 'large'
  onClick: Function,
  item: OptionsType,
  groupSelectSign: Boolean,
  searchValue?: string
}
interface DdItemState {
  visible: Boolean
}

export default class ListItem extends React.PureComponent<DdItemProps, DdItemState> {
  private DdWrapperRef: React.RefObject<HTMLElement> = React.createRef();
  constructor(props: DdItemProps) {
    super(props);

    this.state = {
      visible: false
    };
  }
  componentDidMount() {
    if (this.DdWrapperRef && this.DdWrapperRef.current) {
      const { current } = this.DdWrapperRef;
      if (current.scrollWidth > current.clientWidth) {
        this.setState({
          visible: true
        })
      }
    }
  }
  onClick = () => {
    const { item } = this.props;
    if (!item.disabled) {
      this.props.onClick && this.props.onClick(item);
    }
  }
  getLabelContent = () => {
    const { item, searchValue = '' } = this.props;
    const reg = new RegExp(searchValue, 'g');
    if (searchValue) {
      return item.label ? item.label.replace(reg, `<mark>${searchValue}</mark>`) : item.label;
    }
    return item.label
  }
  render() {
    const { active, item, groupSelectSign, font, searchValue } = this.props;
    const { visible } = this.state;
    const content = this.getLabelContent();

    return (
      <dd
        ref={this.DdWrapperRef}
        className={classes({element: 'ddWrapper',modifiers: {fontLarge: font === 'large',active,disabled: item.disabled,groupSelectSign}})}
        onClick={this.onClick}
        >
        {
          visible ? <ToolTip title={item.label}><div className={classes({element: 'ddText'})} dangerouslySetInnerHTML={{__html:(content || '')}}></div></ToolTip> : <span dangerouslySetInnerHTML={{__html:(content || '')}}></span>
        }
      </dd>
    )
  }
}