import React, { useState } from 'react';
import useEffectOnce from 'react-use/lib/useEffectOnce';
import { InputNumber } from 'antd';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(duration);
dayjs.extend(relativeTime);
const TimeSelect: React.FC<
  {
    value?: number;
    onChange?: (value: number) => void;
  } & {
    style?: React.CSSProperties;
    className?: string;
  }
> = ({ value, onChange, ...restProps }) => {
  const [hour, setHour] = useState<number>(0);
  const [minute, setMinute] = useState<number>(0);
  const [second, setSecond] = useState<number>(0);
  useEffectOnce(() => {
    if (value !== undefined) {
      const duration = dayjs.duration(value);
      const hours = Math.floor(duration.asHours());
      const mins = Math.floor(duration.asMinutes()) - hours * 60;
      const sec =
        Math.floor(duration.asSeconds()) - mins * 60 - hours * 60 * 60;
      setHour(hours);
      setMinute(mins);
      setSecond(sec);
    }
  });
  const updateTimeMilliseconds = (
    hourParam: number,
    minuteParam: number,
    secondParam: number,
  ) => {
    const timeMilliseconds = dayjs
      .duration([hourParam, minuteParam, secondParam].join(':'))
      .asMilliseconds();
    if (onChange) {
      onChange(timeMilliseconds);
    }
  };

  return (
    <span {...restProps}>
      <InputNumber
        style={{ width: '70px' }}
        min={0}
        precision={0}
        value={hour}
        // @ts-ignore
        onChange={(value: number) => {
          setHour(value);
          updateTimeMilliseconds(value, minute, second);
        }}
      />
      <span style={{ margin: '0 4px' }}>:</span>
      <InputNumber
        style={{ width: '70px' }}
        min={0}
        max={59}
        precision={0}
        value={minute}
        // @ts-ignore
        onChange={(value: number) => {
          setMinute(value);
          updateTimeMilliseconds(hour, value, second);
        }}
      />
      <span style={{ margin: '0 4px' }}>:</span>
      <InputNumber
        style={{ width: '70px' }}
        min={0}
        max={59}
        precision={0}
        value={second}
        // @ts-ignore
        onChange={(value: number) => {
          setSecond(value);
          updateTimeMilliseconds(hour, minute, value);
        }}
      />
    </span>
  );
};

export default TimeSelect;