import React from "react";
import { Icon } from "antd";

export default class CanDeleteItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showDelete: false
    };
  }

  handleMouseOver() {
    this.setState({ showDelete: true });
  }

  handelMouseout() {
    setTimeout(() => {
      this.setState({ showDelete: false });
    }, 400);
  }

  render() {
    const { title } = this.props;
    return (
      <div style={{ display: "inline-block", paddingLeft: "10px", paddingRight: "10px" }}
           onMouseEnter={() => this.handleMouseOver()} onMouseLeave={() => this.handelMouseout()}>
        <span className="selectedItem" onBlur>{title}</span>
        {/*{*/}
        {/*  this.state.showDelete &&*/}
          <Icon type="cross" style={{ cursor: "pointer", marginLeft: "5px", fontWeight: "600" }}
                onClick={() => this.props.onDelete(this.props.item)}/>
        {/*}*/}
      </div>
    );
  }
}