import React from 'react';
import { Tabs, Form, Row, Col, InputNumber, Button, Switch, DatePicker } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import EditTableCell from '@src/components/EditTableCell';
import { getMap, flattenObject } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import TableLayout from '@src/layouts/TableLayout';
import { QuestionDifficult } from '../../../../Constant';
import { System } from '../../../stores/system';
// import { Examination } from '../../../stores/examination';
import { Exercise } from '../../../stores/exercise';

export default class extends Page {
  constructor(props) {
    super(props);
    this.exerciseColumns = [{
      title: '学科',
      dataIndex: 'title',
    }].concat(QuestionDifficult.map(row => {
      return {
        title: row.label,
        dataIndex: row.value,
        render: (text, result) => {
          const { exercise = {} } = this.state;
          return <EditTableCell value={(exercise[result.id] || {})[row.value] || 0} onChange={(v) => {
            this.changeMapValue('exercise', result.id, row.value, v);
          }} />;
        },
      };
    }));

    this.examinationColumns = [{
      title: '学科',
      dataIndex: 'title',
    }, {
      title: '题目数',
      dataIndex: 'number',
      render: (text, result) => {
        const { examination = {} } = this.state;
        return (examination[result.extend] || {}).number || 0;
        // return <EditTableCell value={(examination[result.extend] || {}).number || 0} onChange={(v) => {
        //   this.changeMapValue('examination', result.extend, 'number', v);
        // }} />;
      },
    }, {
      title: '做题时间',
      dataIndex: 'time',
      render: (text, result) => {
        const { examination = {} } = this.state;
        return Number((examination[result.extend] || {}).time || 0) / 60;
        // return <EditTableCell value={(examination[result.extend] || {}).time || 0} onChange={(v) => {
        //   this.changeMapValue('examination', result.extend, 'time', v);
        // }} />;
      },
    }];
    this.state.tab = 'exercise';
  }

  initData() {
    Promise.all(this.structExamination(), this.structExercise())
      .then(() => {
        return this.refresh(this.state.tab);
      });
  }

  refresh(tab) {
    if (tab === 'exercise') {
      return Promise.all([this.refreshScoreSwitch(), this.refreshExercise(), this.refreshSentence(), this.refreshTextbook()]);
    }
    if (tab === 'examination') {
      return this.refreshExamination();
    }
    if (tab === 'filter') {
      return this.refreshFilter();
    }
    if (tab === 'paper') {
      return this.refreshExercisePaperAuto();
    }
    if (tab === 'textbook') {
      return this.refreshTextbookConfig();
    }
    return Promise.reject();
  }

  refreshScoreSwitch() {
    return System.getScoreSwitch().then(result => {
      this.setState({ score: result || {} });
    });
  }

  refreshExercise() {
    return System.getExerciseTime().then((result) => {
      this.setState({ exercise: result });
    });
  }

  refreshExercisePaperAuto() {
    return System.getExercisePaperAuto().then((result) => {
      this.setState({ exercisePaperAuto: result });
    });
  }

  refreshSentence() {
    return System.getSentenceTime().then((result) => {
      this.setState({ sentence: result || {} });

      const { form } = this.props;
      form.setFieldsValue(flattenObject(result, 'sentence'));
    });
  }

  refreshTextbook() {
    return System.getTextbookTime().then((result) => {
      this.setState({ textbook: result || {} });

      const { form } = this.props;
      form.setFieldsValue(flattenObject(result, 'textbook'));
    });
  }

  refreshExamination() {
    return System.getExaminationTime().then((result) => {
      this.setState({ examination: result });
    });
  }

  refreshFilter() {
    return System.getFilterTime().then((result) => {
      this.setState({ filter: result || {} });

      const { form } = this.props;
      form.setFieldsValue(flattenObject(result, 'filter'));
    });
  }

  refreshTextbookConfig() {
    return System.getTextbookConfig().then((result) => {
      this.setState({ textbookConfig: result || {} });

      const { form } = this.props;
      form.setFieldsValue(flattenObject(result, 'textbookConfig'));
    });
  }

  structExercise() {
    return Exercise.allStruct().then(result => {
      const list = result.map(row => { row.title = `${row.titleZh}/${row.titleEn}`; return row; });
      const map = getMap(list, 'id');
      this.setState({
        exerciseList: list.filter(row => row.level === 2).map(row => {
          const parent = map[row.parentId];
          row.title = `${parent.title}-${row.title}`;
          return row;
        }),
      });
    });
  }

  structExamination() {
    return Exercise.allStruct().then(result => {
      const list = result.map(row => { row.title = `${row.titleZh}/${row.titleEn}`; return row; });
      this.setState({
        examinationList: list.filter(row => row.level === 1 && row.isExamination),
      });
    });
  }

  changeMapValue(field, index, key, value) {
    const data = this.state[field] || {};
    data[index] = data[index] || {};
    data[index][key] = value;
    this.setState({ [field]: data });
  }

  changeValue(field, key, value) {
    const data = this.state[field] || {};
    data[key] = value;
    this.setState({ [field]: data });
  }

  submit(tab) {
    let handler;
    if (tab === 'exercise') {
      handler = this.submitExercise()
        .then(() => {
          return this.submitTextbook();
        })
        .then(() => {
          return this.submitSentence();
        });
    }
    if (tab === 'examination') {
      handler = this.submitExamination();
    }
    if (tab === 'filter') {
      handler = this.submitFilter();
    }
    if (tab === 'paper') {
      handler = this.submitExercisePaperAuto();
    }
    handler.then(() => {
      asyncSMessage('保存成功');
    });
  }

  submitScore() {
    const { score } = this.state;
    return System.setScoreSwitch(score);
  }

  submitExercise() {
    const { exercise } = this.state;
    return System.setExerciseTime(exercise);
  }

  submitExercisePaperAuto() {
    const { exercisePaperAuto } = this.state;
    return System.setExercisePaperAuto(exercisePaperAuto);
  }

  submitSentence() {
    const { sentence } = this.state;
    return System.setSentenceTime(sentence);
  }

  submitTextbook() {
    const { textbook } = this.state;
    return System.setTextbookTime(textbook);
  }

  submitExamination() {
    const { examination } = this.state;
    return System.setExaminationTime(examination);
  }

  submitFilter() {
    const { form } = this.props;
    return new Promise((resolve, reject) => {
      form.validateFields(['filter'], (err, values) => {
        if (!err) {
          System.setFilterTime(values.filter)
            .then(() => {
              resolve();
            })
            .catch((e) => {
              reject(e);
            });
        }
      });
    });
  }

  renderAll() {
    const { score = {} } = this.state;
    return <Form>
      <Row>
        <Col span={8} offset={16}>
          <Form.Item labelCol={{ span: 12 }} wrapperCol={{ span: 10 }} label='是否启动全站数据'>
            <Switch checked={score.all} checkedChildren='启用' unCheckedChildren='未启用' onChange={(value) => {
              score.all = value;
              this.setState({ score });
              this.submitScore();
            }} />
          </Form.Item>
        </Col>
      </Row>
    </Form>;
  }

  renderExercise() {
    return <TableLayout
      key={this.state.exercise ? 1 : 0}
      columns={this.exerciseColumns}
      list={this.state.exerciseList}
      pagination={false}
      loading={this.props.core.loading}
    />;
  }

  renderOther() {
    const { getFieldDecorator } = this.props.form;
    return <Form>
      <Row>
        <Col span={12}>
          <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='长难句'>
            {getFieldDecorator('sentence.time', {
              rules: [
                { required: true, message: '输入每题预估时间' },
              ],
            })(
              <InputNumber placeholder='请输入每题预估时间' addonAfter="s" onChange={(value) => {
                this.changeValue('sentence', 'time', value);
              }} style={{ width: '200px' }} />,
            )}
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='数据机经'>
            {getFieldDecorator('textbook.time', {
              rules: [
                { required: true, message: '输入每题预估时间' },
              ],
            })(
              <InputNumber placeholder='请输入每题预估时间' addonAfter="s" onChange={(value) => {
                this.changeValue('textbook', 'time', value);
              }} style={{ width: '200px' }} />,
            )}
          </Form.Item>
        </Col>
      </Row>
    </Form>;
  }

  renderFilterTime() {
    const { getFieldDecorator } = this.props.form;
    return <Form>
      <Row>
        <Col span={12}>
          <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='最短时间/题'>
            {getFieldDecorator('filter.min', {
              rules: [
                { required: true, message: '输入最短做题时间' },
              ],
            })(
              <InputNumber placeholder='请输入最短做题时间' addonAfter="s" onChange={(value) => {
                this.changeValue('filter', 'min', value);
              }} style={{ width: '200px' }} />,
            )}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='最长时间/题'>
            {getFieldDecorator('filter.max', {
              rules: [
                { required: true, message: '输入最长做题时间' },
              ],
            })(
              <InputNumber placeholder='请输入最长做题时间' addonAfter="s" onChange={(value) => {
                this.changeValue('filter', 'max', value);
              }} style={{ width: '200px' }} />,
            )}
          </Form.Item>
        </Col>
      </Row>
    </Form>;
  }

  renderExercisePaperAuto() {
    const { getFieldDecorator } = this.props.form;
    return <Form>
      <Row>
        <Col span={12}>
          <Form.Item labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label='下次错误率组卷'>
            {getFieldDecorator('exercisePaper.date', {
              rules: [
                { required: true, message: '下次错误率组卷时间' },
              ],
            })(
              <DatePicker placeholder='请输入下次练习错误率组卷时间' onChange={(value) => {
                this.changeValue('exercisePaper', 'date', value);
              }} />,
            )}
          </Form.Item>
        </Col>
      </Row>
    </Form>;
  }

  renderTextbookConfig() {
    const { getFieldDecorator } = this.props.form;
    return <Form>
      <Row>
        <Col span={12}>
          <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='每月基础人数'>
            {getFieldDecorator('textbookConfig.use_number', {
              rules: [
                { required: true, message: '输入每月基础人数' },
              ],
            })(
              <InputNumber placeholder='请输入每月基础人数' onChange={(value) => {
                this.changeValue('textbookConfig', 'use_number', value);
              }} style={{ width: '200px' }} />,
            )}
          </Form.Item>
        </Col>
      </Row>
    </Form>;
  }


  renderExamination() {
    return <TableLayout
      columns={this.examinationColumns}
      list={this.state.examinationList}
      pagination={false}
      loading={this.props.core.loading}
    />;
  }

  renderView() {
    const { tab } = this.state;
    return <Block>
      <Tabs activeKey={tab} onChange={(value) => {
        this.setState({ tab: value, selectedKeys: [], checkedKeys: [] });
        this.refresh(value);
      }}>
        <Tabs.TabPane tab="预估做题时间" key="exercise">
          {this.renderAll()}
          {this.renderExercise()}
          {this.renderOther()}
        </Tabs.TabPane>
        <Tabs.TabPane tab="数据剔除时间" key="filter">
          {this.renderFilterTime()}
        </Tabs.TabPane>
        <Tabs.TabPane tab="预估考试时间" key="examination">
          {this.renderExamination()}
        </Tabs.TabPane>
        <Tabs.TabPane tab="组卷" key="paper">
          {this.renderExercisePaperAuto()}
        </Tabs.TabPane>
        <Tabs.TabPane tab="机经" key="textbook">
          {this.renderTextbookConfig()}
        </Tabs.TabPane>
      </Tabs>
      {tab !== 'examination' && <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit(tab);
          }}>保存</Button>
        </Col>
      </Row>}

    </Block>;
  }
}