import React, { useState } from "react";
import moment from "moment";
import { DatePicker, Segment, Text, Form } from "@tencent/tea-component";

const { RangePicker } = DatePicker;

const options = [
  { text: "今天", value: "1" },
  { text: "昨天", value: "2" },
  { text: "近7天", value: "3" },
  { text: "近30天", value: "4" },
];

const rangeMap = {
  "1": [moment(), moment()],
  "2": [moment().subtract(1, "d"), moment().subtract(1, "d")],
  "3": [moment().subtract(6, "d"), moment()],
  "4": [moment().subtract(29, "d"), moment()],
};

export default () => {
  const [segmentValue1, setSegmentValue1] = useState(null);
  const [segmentValue2, setSegmentValue2] = useState(null);

  const [value1, setValue1] = useState(null);
  const [value2, setValue2] = useState(null);

  function setRangeValue(value, setter) {
    const range = rangeMap[value];
    setter(range);
    return range;
  }

  function getSegmentValue(dates) {
    const [start, end] = dates;
    return Object.entries(rangeMap).reduce((prev, cur) => {
      const [key, range] = cur;
      if (start.isSame(range[0], "day") && end.isSame(range[1], "day")) {
        return key;
      }
      return prev;
    }, null);
  }

  return (
    <Form layout="vertical">
      <Form.Item label="快捷选项栏">
        <Segment
          value={segmentValue1}
          options={options}
          onChange={value => {
            setSegmentValue1(value);
            const range = setRangeValue(value, setValue1);
            console.log(
              range[0].format("YYYY/MM/DD"),
              range[1].format("YYYY/MM/DD")
            );
          }}
        />
        <RangePicker
          value={value1}
          onChange={value => {
            setValue1(value);
            setSegmentValue1(getSegmentValue(value));
            console.log(
              value[0].format("YYYY/MM/DD"),
              value[1].format("YYYY/MM/DD")
            );
          }}
        />
      </Form.Item>
      <Form.Item label="预设快捷选项">
        <RangePicker
          header={
            <Segment
              rimless
              value={segmentValue2}
              options={options}
              onChange={value => {
                setSegmentValue2(value);
                const range = setRangeValue(value, setValue2);
                console.log(
                  range[0].format("YYYY/MM/DD"),
                  range[1].format("YYYY/MM/DD")
                );
              }}
            />
          }
          value={value2}
          onChange={value => {
            setValue2(value);
            setSegmentValue2(getSegmentValue(value));
            console.log(
              value[0].format("YYYY/MM/DD"),
              value[1].format("YYYY/MM/DD")
            );
          }}
        />
      </Form.Item>
      <Form.Item label="自定义头部">
        <RangePicker
          onChange={value => {
            console.log(
              value[0].format("YYYY/MM/DD"),
              value[1].format("YYYY/MM/DD")
            );
          }}
          range={[moment("2020-01-01"), null]}
          disabledDate={date => {
            return (
              !date.isAfter(moment(), "day") &&
              !date.isBefore(moment("2020-01-01"), "day")
            );
          }}
          header={
            <Text theme="weak">提示：仅支持选择从 2020-01-01 至今的数据</Text>
          }
        />
      </Form.Item>
    </Form>
  );
};