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

import AppList from './apps/AppList';

const TabList = Tabs.TabList;
const Tab = Tabs.Tab;
const TabPanel = Tabs.TabPanel;


class LeftMaxContent extends Component {

  static propTypes = {
    closeBox: PropTypes.func,
    activeKey: PropTypes.string,
    calcCenterStyle: PropTypes.func,
    display: PropTypes.bool,
    onTabChange: PropTypes.func
  };

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

  componentDidMount() {
    this.offset();
  }

  onTabChange = (index, key) => {

  }

  onClosed = () => {
    this.setState({
      visible: false
    }, () => this.props.closeBox('left'));
  }

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

  render() {
    const { activeKey, display, onTabChange } = this.props;

    const cls = classnames({
      'box-left-normal': true,
      'common-animated': true,
      'app-sider': true,
      'amos-anim-move-left-out': !display,
      'amos-anim-move-left-in': display
    });

    return (
      <div className={cls} style={{ display: display ? 'block' : 'none' }} ref={node => this.container = node}>
        <Tabs activeKey={activeKey} onChange={onTabChange} closeAnimate>
          <TabList>
            <Tab activeKey="collection"><span><Icon icon="collection" />我的收藏</span></Tab>
            <Tab activeKey="application"><span><Icon icon="appstore" />可用应用</span></Tab>
            <Tab activeKey="card"><span><Icon icon="card" />可用卡片</span></Tab>
          </TabList>
          <TabPanel activeKey="collection">Tab 1</TabPanel>
          <TabPanel activeKey="application"><AppList onClosed={this.onClosed} /></TabPanel>
          <TabPanel activeKey="card">Tab 2</TabPanel>
        </Tabs>
        <div className="box-close left" onClick={this.onClosed}>
          <Icon icon="left" />
        </div>
      </div>
    );
  }
}

export default LeftMaxContent;
