/* eslint-disable object-curly-newline */
import React, { Component } from 'react';
import { Row, Col, Tabs } from 'antd';
import TimeLineChart from '../TimelineChart';
import NumberInfo from '../../NumberInfo';
import Pie from '../Pie';
import styles from '../index.less';
import * as utils from '../../../utils/utils';

const { TabPane } = Tabs;

class TimeLineGroup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      offlineCard: styles.offlineCard,
      tabGroup: styles.tabGroup,
      currentTabKey: utils.isNotEmptyArr(props.data) ? props.data[0].x : '',
    };
  }

  handleTabChange = (key) => {
    this.setState({
      currentTabKey: key,
    });
  };

  render() {
    const { offlineCard, currentTabKey, tabGroup } = this.state;
    const { data, titleMap, subTitle, yUnit } = this.props;
    const TabGroup = ({ tabData, currentTabKey: currentKey }) => (
      <Row gutter={8} className={tabGroup}>
        <Col span={12}>
          <NumberInfo
            title={tabData.x}
            subTitle={subTitle}
            gap={2}
            total={`${tabData.y * 100}%`}
            theme={(currentKey !== tabData.x) && 'light'}
          />
        </Col>
        <Col span={12} style={{ paddingTop: 36 }}>
          <Pie
            animate={false}
            color={(currentKey !== tabData.x) && '#BDE4FF'}
            inner={0.55}
            tooltip={false}
            margin={[8, 0, 0, 0]}
            percent={tabData.y * 100}
            height={46}
          />
        </Col>
      </Row>
    );
    return (
      <Tabs
        className={offlineCard}
        activeKey={currentTabKey}
        onChange={this.handleTabChange}
      >
        {
          data.map(item => (
            <TabPane
              tab={<TabGroup tabData={item} currentTabKey={currentTabKey} />}
              key={item.x}
            >
              <TimeLineChart
                data={item.child}
                titleMap={titleMap}
                yUnit={yUnit}
                height={this.props.height}
              />
            </TabPane>))
        }
      </Tabs>
    );
  }
}

export default TimeLineGroup;