import React, { Component, useState, useImperativeHandle,useEffect } from 'react';
import { Card, Row, Col, Statistic, Icon, Button, DatePicker } from 'antd';
import ButtonGroup from 'antd/lib/button/button-group';
import moment from 'moment';

const { RangePicker } = DatePicker;

const TimeSelect = React.forwardRef((props, ref) => {
  const { value = 'week', onChange = () => {}, buttonType = 'link' } = props;

  const [rangePickerValue, setRangePickerValue] = useState();
  const [type, setType] = useState('week');
  //   const [rangePickerValue,setRangePickerValue] = useState()

  useImperativeHandle(ref, () => ({
    reset: () => {
      setType(value);
    },
    // getSearchData: searchData,
  }));
  // useEffect(() => {
  //   // setType('week');
  //   if (value == 'today' || value == 'week' || value == 'month') {
  //     setType(value);
  //   }
  // }, [value]);
  useEffect(() => {
    console.log(type);
    if (type == 'today') {
      setRangePickerValue([moment().subtract('day'), moment()]);
    } else if (type == 'week') {
      setRangePickerValue([moment().subtract(1, 'week'), moment()]);
    } else if (type == 'month') {
      setRangePickerValue([moment().subtract(1, 'month'), moment()]);
    }
  }, [type]);

  useEffect(() => {
    if (rangePickerValue) {
      onChange(rangePickerValue);
    }
  }, [rangePickerValue]);

  const isActive = e => {
    // const { rangePickerValue } = this.state;
    // const value = getTimeDistance(type);
    // if (!rangePickerValue[0] || !rangePickerValue[1]) {
    //   return;
    // }
    // if (
    //   rangePickerValue[0].isSame(value[0], 'day') &&
    //   rangePickerValue[1].isSame(value[1], 'day')
    // ) {
    //   return styles.currentDate;
    // }
  };

  const selectDate = e => {};

  const handleRangePickerChange = e => {
    setType('other');
    onChange(e);
  };

  return (
    <div style={{ display: 'flex' }}>
      <div>
        <Button
          type={buttonType}
          style={type === 'today' ? undefined : { color: 'rgba(0,0,0,0.65)' }}
          onClick={() => setType('today')}
        >
          今日
        </Button>
        <Button
          type={buttonType}
          style={type === 'week' ? undefined : { color: 'rgba(0,0,0,0.65)' }}
          onClick={() => setType('week')}
        >
          最近一周
        </Button>
        <Button
          type={buttonType}
          style={type === 'month' ? undefined : { color: 'rgba(0,0,0,0.65)' }}
          onClick={() => setType('month')}
        >
          最近一月
        </Button>
      </div>
      <div>
        <RangePicker
          value={rangePickerValue}
          onChange={handleRangePickerChange}
          style={{ width: 256 }}
        />
      </div>
    </div>
  );
});
export default TimeSelect;
