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 { PubSub } from 'ray-eventpool';

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

class RightMaxContent extends Component {

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

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

  componentDidMount() {
    this.offset();
    PubSub.publish('menus-click', {
      rightClose: this.onClosed
    });
  }

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

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

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

    const cls = classnames({
      'box-right-normal': true,
      'common-animated': true,
      'app-sider': true,
      'amos-anim-move-right-out': !display,
      'amos-anim-move-right-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="task"><span>任务{taskSize}</span></Tab>
            <Tab activeKey="message"><span>消息{messageSize}</span></Tab>
          </TabList>
          <TabPanel activeKey="task">任务列表</TabPanel>
          <TabPanel activeKey="message">消息列表</TabPanel>
        </Tabs>
        <div className="box-close right" onClick={this.onClosed}>
          <Icon icon="right" />
        </div>
      </div>
    );
  }
}

export default RightMaxContent;
