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

class TabContentItem extends Component {

  static propTypes = {
    funcIcon: PropTypes.string,
    title: PropTypes.string,
    onFavorite: PropTypes.func,
    onItemClick: PropTypes.func,
    visible: PropTypes.bool,
    showSM: PropTypes.bool,
    showCollection: PropTypes.bool
  };

  static defaultProps = {
    visible: false
  };

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

  onOk = () => {
    this.setState({
      visible: false
    });
  }

  onCancel = () => {
    this.setState({
      visible: false
    });
  }

  showDetails = () => {
    this.setState({
      visible: true
    });
  }

  toggleFavorite = () => {
    this.setState({
      isFavorite: !this.state.isFavorite
    });
    this.props.onFavorite(!this.state.isFavorite);
  }

  render() {
    const { funcIcon, title, showSM, showCollection, onItemClick } = this.props;

    const { isFavorite, visible } = this.state;

    const fav = classnames({
      'shuoming': true,
      'extra-icon': true,
      'favorite': isFavorite
    });

    return (
      <div className="amos-hover-motion tab-content-item" onClick={onItemClick}>
        <img src={funcIcon} alt={title} />
        <h5>{title}</h5>
        { showSM && <Icon icon="shuoming" className="extra-icon" onClick={this.showDetails} /> }
        { showCollection && <Icon icon="collection" className={fav} onClick={this.toggleFavorite} /> }
        { showCollection && <Modal
          visible={visible}
          header="说明"
          onCancel={this.onCancel}
          onOk={this.onOk}
          content={<div>说明</div>}
          footer={<Button onClick={this.hide}>Cancel</Button>}
        />
        }
      </div>
    );
  }
}

export default TabContentItem;
