'use strict';

import React, { Component } from 'react';
import { Feedback, Grid, Icon } from '@icedesign/base';
import ChartItem from './ChartItem';
import ComponentChart from './ComponentChart';
import ProjectCountChart from './ProjectCountChart';
import ActiveProjectsChart from './ActiveProjectsChart';
import RealTimeStatistics from './RealTimeStatistics';
import './CollectData.less';

const { Row, Col } = Grid;
const effectiveComponentList = [
  'Feedback',
  'Checkbox',
  'Button',
  'Dialog',
  'Table',
  'Balloon',
  'Form',
  'Field',
  'Input',
  'Radio',
  'Step',
  'Upload',
  'Icon',
  'Breadcrumb',
  'Col',
  'Row',
  'Dropdown',
  'Menu',
  'Pagination',
  'Rating',
  'DatePicker',
  'TimePicker',
  'Select',
  'moment',
  'Switch',
  'Notice',
  'Search',
  'Slider',
  'Navigation',
  'field',
  'Calendar',
  'Grid',
  'Tab',
  'Tag',
  'Progress',
  'Badge',
  'ImageUpload',
  'NumberPicker',
  'Animate',
  'CascaderSelect',
  'Panel',
  'Accordion',
  'Timeline',
  'Card',
  'Loading',
  'Overlay',
  'RadioGroup',
  'Range',
  'Combobox',
  'Tree',
  'CropUpload',
  'TreeSelect',
  'RangePicker',
  'Cascader',
  'CheckBox',
  'Dom',
  'LocaleProvider',
  'Label',
  'Transfer',
  'Affix',
  'FeedBack',
  'Buttom',
  'ButtonGroup',
  'DropDown',
  'ConfigProvider',
];

export default class CollectDataView extends Component {
  render() {
    const { loading, error, data = {} } = this.props;
    const baseComponents = {};
    const bizComponents = {};
    const { activeProjects } = data;

    if (data && data.baseComponents) {
      Object.keys(data.baseComponents).forEach((item) => {
        if (
          effectiveComponentList.indexOf(item) > -1 &&
          data.baseComponents[item].useProjectCount > 25
        ) {
          // 清洗数据
          baseComponents[item] = data.baseComponents[item];
        }
      });
    }

    if (data && data.businessComponents) {
      Object.keys(data.businessComponents).forEach((item) => {
        if (
          data.businessComponents[item] &&
          data.businessComponents[item].useProjectCount > 10
        ) {
          bizComponents[item.replace(/^ice-/, '')] =
            data.businessComponents[item];
        }
      });
    }

    const { overview = {} } = data;
    const feedbackStyle = { margin: '20px auto' };

    return (
      <div className="collect-data-page">
        {loading && <Icon type="loading" />}
        {error && (
          <Feedback
            style={feedbackStyle}
            type="error"
            title={error.message}
            shape="addon"
          />
        )}

        <RealTimeStatistics data={overview} />

        <Row>
          <Col span={12}>
            <ChartItem title="月增加项目数">
              <ProjectCountChart />
            </ChartItem>
          </Col>
          {activeProjects &&
            activeProjects.length > 0 && (
              <Col span={12}>
                <ChartItem title="近一个月活跃项目构建次数">
                  <ActiveProjectsChart data={activeProjects} />
                </ChartItem>
              </Col>
            )}
        </Row>
        {baseComponents &&
          Object.keys(baseComponents).length > 0 && (
            <Row>
              <Col>
                <ChartItem
                  title="基础组件使用数据"
                  subTitle="已忽略使用量较少的组件"
                >
                  <ComponentChart type="baseComponent" data={baseComponents} />
                </ChartItem>
              </Col>
            </Row>
          )}

        {bizComponents && Object.keys(bizComponents).length > 0 ? (
          <Row>
            <Col>
              <ChartItem
                title="业务组件使用数据"
                subTitle="已忽略使用量较少的组件"
              >
                <ComponentChart type="businessComponent" data={bizComponents} />
              </ChartItem>
            </Col>
          </Row>
        ) : null}
      </div>
    );
  }
}