import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from 'amos-icon';
import dt2react from 'dt2react';

class LeftMinContent extends Component {

  static propTypes = {
    boxList: PropTypes.array,
    openBox: PropTypes.func,
    calcCenterStyle: PropTypes.func,
    display: PropTypes.bool
  };

  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }

  componentDidMount() {
    this.offset();
  }

  onItemClick = (e, itemKey) => {
    this.setState({
      visible: true
    }, () => this.props.openBox({
      type: 'left',
      openKey: itemKey
    }));
  }

  offset = () => {
    const _node = this.container;
    const offset = dt2react.getOffset(_node) || {};
    this.props.calcCenterStyle({
      leftOffset: offset
    });
  }

  renderItem = ({ key, icon, text }) => {
    return (
      <div key={key} className="box-min-item" onClick={(e) => this.onItemClick(e, key)}>
        <Icon icon={icon} />
        <div className="box-tip">{text}</div>
      </div>
    );
  }

  render() {
    const { visible } = this.state;

    const { boxList, display } = this.props;
    const cls = classnames({
      'box-left-min': true,
      'common-animated': true,
      'amos-anim-move-left-out': visible,
      'amos-anim-move-left-in': !visible
    });

    return (
      <div className={cls}  style={{ display: display ? 'block' : 'none' }}  ref={node => this.container = node}>
        <div className="box-min">
          <div className="box-min-cont">
            {
              boxList.map(bl => this.renderItem({ ...bl }))
            }
          </div>
        </div>
      </div>
    );
  }
}

export default LeftMinContent;
