import React, { Component, useState, 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 = props => {
  const { value, onChange=()=>{} } = props;

  const [rangePickerValue, setRangePickerValue] = useState();
  const [type, setType] = useState('week');
  //   const [rangePickerValue,setRangePickerValue] = useState()
  useEffect(() => {
    // setType('week');
  }, []);
  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 => {
    onChange(e);
  };

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