import React from "react";
import moment, { isMoment } from "moment";
import { TimePicker } from "@tencent/tea-component";

const { RangePicker } = TimePicker;

const range = (s, t) =>
  Array(t - s + 1)
    .fill(0)
    .map((_, i) => s + i);

export default () => {
  return (
    <>
      <section>
        <RangePicker
          defaultValue={[
            moment("09:30:00", "HH:mm:ss"),
            moment("23:30:00", "HH:mm:ss"),
          ]}
          minuteStep={10}
          secondStep={30}
          onChange={value =>
            console.log(
              value[0].format("HH:mm:ss"),
              value[1].format("HH:mm:ss")
            )
          }
        />
      </section>
      <section>
        <RangePicker
          format="HH:mm"
          range={[moment("09:30", "HH:mm"), moment("23:30", "HH:mm")]}
          onChange={value =>
            console.log(value[0].format("HH:mm"), value[1].format("HH:mm"))
          }
        />
      </section>
      <hr />
      <p>起始相距两小时以上</p>
      <section>
        <RangePicker
          format="HH:mm"
          disabledTime={(time, partial) => {
            const [start] = time;
            if (partial === "end" && isMoment(start)) {
              return {
                disabledHours: () => range(0, start.hour() + 1),
                disabledMinutes: hour =>
                  hour - start.hour() <= 2 ? range(0, start.minute() - 1) : [],
              };
            }
            return {};
          }}
          onChange={value =>
            console.log(value[0].format("HH:mm"), value[1].format("HH:mm"))
          }
        />
      </section>
    </>
  );
};