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

export default function DotAndMultiRangeExample() {
  const minTime = moment("2020-10-01 00:00:00");
  const maxTime = moment("2020-10-01 23:59:59");
  const range = [
    [
      moment("2020-10-01 06:00:00").unix(),
      moment("2020-10-01 08:00:00").unix(),
    ],
    [
      moment("2020-10-01 14:00:00").unix(),
      moment("2020-10-01 18:00:00").unix(),
    ],
  ];

  const dotValues = [
    moment("2020-10-01 01:30:00").unix(),
    moment("2020-10-01 02:30:00").unix(),
  ];

  const marks = [
    {
      value: minTime.unix(),
      label: minTime.format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      value: moment("2020-10-01 12:00:00").unix(),
      label: moment("2020-10-01 12:00:00").format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      value: maxTime.unix(),
      label: maxTime.format("YYYY-MM-DD HH:mm:ss"),
    },
  ];

  const [value, setValue] = useState(moment("2020-10-01 06:00:00").unix());

  return (
    <Slider
      range={range}
      multiRangeMode
      dotValues={dotValues}
      min={minTime.unix()}
      max={maxTime.unix()}
      step={1}
      marks={marks}
      value={value}
      onChange={(value, context) => {
        setValue(value);
      }}
      enableTrackTip
      tipFormatter={value => (
        <span>{moment(value * 1000).format("YYYY-MM-DD HH:mm:ss")}</span>
      )}
      after={
        <DatePicker
          format="YYYY-MM-DD HH:mm:ss"
          showTime={{ format: "HH:mm:ss" }}
          value={moment(value * 1000)}
          onChange={(value, context) => {
            setValue(value.unix());
          }}
          disabledDate={date => {
            let disabled = true;
            if (
              dotValues
                .map(value => moment(value * 1000).format("YYYY-MM-DD"))
                .includes(date.format("YYYY-MM-DD"))
            ) {
              disabled = false;
            }
            const inRange = range
              .map(value => [
                moment(value[0] * 1000).format("YYYY-MM-DD"),
                moment(value[1] * 1000).format("YYYY-MM-DD"),
              ])
              .reduce((pre, current) => {
                const startTime = moment(current[0]).unix();
                const endTime = moment(current[1]).unix();
                const currentDateTime = date.unix();
                return (
                  pre ||
                  (currentDateTime >= startTime && currentDateTime <= endTime)
                );
              }, false);

            if (inRange) {
              disabled = false;
            }

            return !disabled;
          }}
          disabledTime={date => ({
            disabledHours: () => {
              const enabledHours = [];
              dotValues.forEach(value => {
                if (
                  moment(value * 1000).format("YYYY-MM-DD") ===
                  date.format("YYYY-MM-DD")
                ) {
                  enabledHours.push(
                    parseInt(moment(value * 1000).format("HH"), 10)
                  );
                }
              });
              range.forEach(value => {
                const startTime = value[0] * 1000;
                const endTime = value[1] * 1000;
                const currentDateTime = date.valueOf();
                if (
                  currentDateTime >= startTime ||
                  currentDateTime <= endTime
                ) {
                  if (
                    moment(endTime).format("YYYYMMDD") >
                    moment(startTime).format("YYYYMMDD")
                  ) {
                    const startHour = parseInt(
                      moment(startTime).format("HH"),
                      10
                    );
                    for (let i = startHour; i <= 24; i++) {
                      enabledHours.push(i);
                    }
                  } else if (
                    moment(endTime).format("YYYYMMDD") ===
                    moment(startTime).format("YYYYMMDD")
                  ) {
                    const startHour = parseInt(
                      moment(startTime).format("HH"),
                      10
                    );
                    const endHour = parseInt(moment(endTime).format("HH"), 10);
                    for (let i = startHour; i <= endHour; i++) {
                      enabledHours.push(i);
                    }
                  }
                }
              });
              const disabledHours = Array(24)
                .fill(null)
                .map((_, hour) => hour)
                .filter(hour => !enabledHours.includes(hour));

              return disabledHours;
            },
            // 此处分钟 & 秒的实现参考上面日期和小时的禁用函数即可
            disabledMinutes: selectedHour => [],
            disabledSeconds: (selectedHour, selectedMinutes) => [],
          })}
        />
      }
    />
  );
}