import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Button } from 'reactstrap';
import moment from 'moment';
import { gettext } from '../../../utils/constants';
import Picker from './picker';

const propTypes = {
  getActiviesFiles: PropTypes.func.isRequired,
  children: PropTypes.object,
};

class StatisticCommonTool extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      statisticType: 'oneWeek',
      startValue: null,
      endValue: null,
    };
  }

  componentDidMount() {
    let today = moment().format('YYYY-MM-DD 00:00:00');
    let endTime = today;
    let startTime = moment().subtract(6,'d').format('YYYY-MM-DD 00:00:00');
    let group_by = 'day';
    this.props.getActiviesFiles(startTime, endTime, group_by);
  }

  changeActive = (statisticTypeName) => {
    let { statisticType } = this.state;
    if (statisticType === statisticTypeName) {
      return;
    }
    let today = moment().format('YYYY-MM-DD 00:00:00');
    let endTime = today;
    let startTime;
    switch(statisticTypeName) {
      case 'oneWeek' :
        startTime = moment().subtract(6,'d').format('YYYY-MM-DD 00:00:00');
        break;
      case 'oneMonth' :
        startTime = moment().subtract(29,'d').format('YYYY-MM-DD 00:00:00');
        break;
      case 'oneYear' :
        startTime = moment().subtract(364,'d').format('YYYY-MM-DD 00:00:00');
        break;
    }
    this.setState({
      statisticType: statisticTypeName,
    });
    let group_by = 'day';
    this.props.getActiviesFiles(startTime, endTime, group_by);
  }

  disabledStartDate = (startValue) => {
    if (!startValue) {
      return false;
    }
    let today = moment().format();

    const endValue = this.state.endValue;
    if (!endValue) {
      let startTime = moment(startValue).format();
      return today < startTime;
    }
    return endValue.isBefore(startValue) || moment(startValue).format() > today;
  }

  disabledEndDate = (endValue) => {
    if (!endValue) {
      return false;
    }
    let today = moment().format();
    const startValue = this.state.startValue;
    if (!startValue) {
      let endTime = moment(endValue).format();
      return today < endTime;
    }
    return endValue.isBefore(startValue) || moment(endValue).format() > today;
  }

  onChange = (field, value) => {
    this.setState({
      [field]: value,
    });
  }

  onSubmit = () => {
    let { startValue, endValue } = this.state;
    if(!startValue || !endValue) {
      return;
    }
    this.setState({
      statisticType: 'itemButton',
    });
    let startTime = moment(startValue).format('YYYY-MM-DD 00:00:00');
    let endTime = moment(endValue).format('YYYY-MM-DD 00:00:00');
    let group_by = 'day';
    this.props.getActiviesFiles(startTime, endTime, group_by);
  }

  render() {
    let { statisticType, endValue, startValue } = this.state;
    return(
      <Fragment>
        {this.props.children}
        <div className="system-statistic-time-range">
          <div className="sys-stat-tool">
            <div className={`system-statistic-item border-right-0 rounded-left ${statisticType === 'oneWeek' ? 'item-active' : ''}`} onClick={this.changeActive.bind(this, 'oneWeek')}>{gettext('7 Days')}</div>
            <div className={`system-statistic-item border-right-0 ${statisticType === 'oneMonth' ? 'item-active' : ''}`}  onClick={this.changeActive.bind(this, 'oneMonth')}>{gettext('30 Days')}</div>
            <div className={`system-statistic-item rounded-right ${statisticType === 'oneYear' ? 'item-active' : ''}`}  onClick={this.changeActive.bind(this, 'oneYear')}>{gettext('1 Year')}</div>
          </div>
          <div className="system-statistic-input-container">
            <Picker
              disabledDate={this.disabledStartDate}
              value={startValue}
              onChange={this.onChange.bind(this, 'startValue')}
            />
            <span className="system-statistic-connect">-</span>
            <Picker
              disabledDate={this.disabledEndDate}
              value={endValue}
              onChange={this.onChange.bind(this, 'endValue')}
            />
            <Button className="operation-item system-statistic-button" onClick={this.onSubmit}>{gettext('Submit')}</Button>
          </div>
        </div>
      </Fragment>
    );
  }
}

StatisticCommonTool.propTypes = propTypes;

export default StatisticCommonTool;