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

interface IconProps {
  onClick?: Function;
  disabled?: boolean;
  isShowDeleteIcon?: boolean
}

export default class DeleteInputTxt extends React.PureComponent<IconProps, any> {
  state = {
    hover: false
  };

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

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

  render() {
    const { onClick,isShowDeleteIcon } = this.props;
    const { hover } = this.state;

    return (
      <div
        className={classes({element: 'clearIcon',modifiers: {show: isShowDeleteIcon}})}
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
        onClick={(e: any) => {
          onClick && onClick(e);
          e.stopPropagation && e.stopPropagation();
        }}
      >
        <Circle color={hover ? $M4 : $M5} />
      </div>
    );
  }
}