import React, { useState } from "react";
import moment from "moment";
import momenttz from "moment-timezone";
import { DatePicker, Select, Form } from "@tencent/tea-component";
import data from "./data";

const options = data.map(({ desc, id }) => ({
  value: id,
  text: `${desc} - ${id}`,
}));

export default () => {
  const [timezone, setTimezone] = useState(moment.tz.guess());
  const [value, setValue] = useState(moment().tz(timezone));

  return (
    <Form layout="vertical">
      <Form.Item label="日期选择">
        {/* 时区变化后通过设置 key 重置日历面板 */}
        <DatePicker
          key={timezone}
          range={[
            moment()
              .tz(timezone)
              .subtract(2, "d")
              .startOf("d"),
            moment()
              .tz(timezone)
              .add(2, "d")
              .endOf("d"),
          ]}
          value={value}
          onChange={value => {
            setValue(value);
            console.log(value.format(), value.tz());
          }}
        />
      </Form.Item>
      <Form.Item label="包含时间的日期选择">
        <DatePicker
          showTime
          key={timezone}
          range={[
            moment()
              .tz(timezone)
              .subtract(2, "d")
              .startOf("d"),
            moment()
              .tz(timezone)
              .add(2, "d")
              .endOf("d"),
          ]}
          value={value}
          onChange={value => {
            setValue(value);
            console.log(value.format(), value.tz());
          }}
        />
      </Form.Item>
      <Form.Item label="时区选择">
        <Select
          searchable
          type="simulate"
          appearance="button"
          size="l"
          matchButtonWidth
          options={options}
          value={timezone}
          onChange={tz => {
            setTimezone(tz);
            setValue(moment(value).tz(tz));
            console.log(tz);
          }}
        />
      </Form.Item>
    </Form>
  );
};