import React, { Component } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import './Gantt.css';


class Gantt extends Component {
  componentDidMount() {
    gantt.plugins({
      tooltip: true, // 鼠标划过任务是否显示明细
      // auto_scheduling: true,//根据任务之间的关系自动安排任务
      // multiselect: true, //为任务激活多任务选择
    });
    gantt.config.xml_date = '%Y-%m-%d %H:%i'; /* 时间格式 年月日 时分 */
    gantt.config.reorder_grid_columns = true; /* 左侧列可拖动 */
    gantt.config.grid_elastic_columns = true;
    // gantt.config.readonly = true;// 只读模式的甘特图
    const { tasks } = this.props;
    gantt.init(this.ganttContainer);
    this.initGanttDataProcessor();
    gantt.parse(tasks);
  }


  shouldComponentUpdate(nextProps) {
    // const { tasks } = nextProps;
    // return tasks !== undefined;
    return this.props.zoom !== nextProps.zoom;
  }
  componentDidUpdate() {
    gantt.clearAll();
    const { tasks } = this.props;
    gantt.init(this.ganttContainer);
    this.initGanttDataProcessor();
    gantt.parse(tasks);
  }
  componentWillUnmount() {
    if (this.dataProcessor) {
      this.dataProcessor.destructor();
      this.dataProcessor = null;
    }
  }
  setZoom = (value) => {
    const scale = value.scale !== undefined ? value.scale : 'Minutes';
    const step = value.step !== undefined ? value.step : 10;
    switch (scale) {
      case 'Minutes':
        gantt.config.duration_unit = 'minute';
        gantt.config.scale_unit = 'day';
        gantt.config.date_scale = '%Y-%m-%d';
        gantt.setWorkTime({ hours: ['00:30-03:30'] });
        gantt.config.scale_height = 60;
        gantt.config.min_column_width = 40;
        gantt.config.subscales = [
          { unit: 'minute', step, date: '%H:%i' },
        ];
        break;
      case 'Hours':
        gantt.config.scale_unit = 'day';
        gantt.config.date_scale = '%d %M';

        gantt.config.scale_height = 60;
        gantt.config.min_column_width = 30;
        gantt.config.subscales = [
          { unit: 'hour', step, date: '%H' },
        ];
        break;
      case 'Days':
        gantt.config.min_column_width = 70;
        gantt.config.scale_unit = 'week';
        gantt.config.date_scale = '#%W';
        gantt.config.subscales = [
          { unit: 'day', step, date: '%d %M' },
        ];
        gantt.config.scale_height = 60;
        break;
      case 'Months':
        gantt.config.min_column_width = 70;
        gantt.config.scale_unit = 'month';
        gantt.config.date_scale = '%F';
        gantt.config.scale_height = 60;
        gantt.config.subscales = [
          { unit: 'week', step, date: '#%W' },
        ];
        break;
      default:
        break;
    }
  }
  initGanttDataProcessor =() => {
    // eslint-disable-next-line prefer-destructuring
    const onDataUpdated = this.props.onDataUpdated;
    if (this.dataProcessor) {
      this.dataProcessor.destructor();
      this.dataProcessor = null;
    }
    this.dataProcessor = gantt.createDataProcessor((type, action, item, id) => {
      return new Promise((resolve) => {
        if (onDataUpdated) {
          onDataUpdated(type, action, item, id);
        }

        // if onDataUpdated changes returns a permanent id of the created item, you can return it from here so dhtmlxGantt could apply it
        // resolve({id: databaseId});
        return resolve();
      });
    });
  }
  render() {
    const { zoom } = this.props;
    this.setZoom(zoom);
    return (
      <div
        ref={(input) => { this.ganttContainer = input; }}
        style={{ width: '100%', height: '100%' }}
      />
    );
  }
}
export default Gantt;