import React, { forwardRef, useRef, useMemo, useEffect, useImperativeHandle, useCallback } from "react";
import { Picker } from "../picker";
import { useUpdateEffect } from "../hooks";
import { padZero, range } from "../utils";
import { times } from "./utils";
import useRefState from "../hooks/use-ref-state";
import { doubleRaf } from "../utils/raf";
const TimePicker = /* @__PURE__ */ forwardRef((props, ref) => {
  const formatValue = (value) => {
    const {
      minHour,
      maxHour,
      minMinute,
      maxMinute
    } = props;
    if (!value) {
      value = `${padZero(minHour)}:${padZero(minHour)}`;
    }
    let [hour, minute] = value.split(":");
    hour = padZero(range(+hour, +minHour, +maxHour));
    minute = padZero(range(+minute, +minMinute, +maxMinute));
    return `${hour}:${minute}`;
  };
  const picker = useRef(null);
  const [currentDate, setCurrentDate, currentDateRef] = useRefState(formatValue(props.value));
  const ranges = useMemo(() => [{
    type: "hour",
    range: [+props.minHour, +props.maxHour]
  }, {
    type: "minute",
    range: [+props.minMinute, +props.maxMinute]
  }], [props.minHour, props.maxHour, props.minMinute, props.maxMinute]);
  const originColumns = useMemo(() => ranges.map(({
    type,
    range: rangeArr
  }) => {
    let values = times(rangeArr[1] - rangeArr[0] + 1, (index) => padZero(rangeArr[0] + index));
    if (props.filter) {
      values = props.filter(type, values);
    }
    return {
      type,
      values
    };
  }), [ranges, props.filter]);
  const columns = useMemo(() => originColumns.map((column) => ({
    values: column.values.map((value) => props.formatter(column.type, value))
  })), [originColumns]);
  const updateColumnValue = useCallback(() => {
    const pair = currentDate.split(":");
    const values = [props.formatter("hour", pair[0]), props.formatter("minute", pair[1])];
    doubleRaf(() => {
      var _a;
      (_a = picker.current) == null ? void 0 : _a.setValues(values);
    });
  }, [currentDate, props.formatter]);
  const updateInnerValue = (indexes) => {
    const [hourIndex, minuteIndex] = indexes;
    const [hourColumn, minuteColumn] = originColumns;
    const hour = hourColumn.values[hourIndex] || hourColumn.values[0];
    const minute = minuteColumn.values[minuteIndex] || minuteColumn.values[0];
    return formatValue(`${hour}:${minute}`);
  };
  const onConfirm = () => {
    var _a;
    return (_a = props.onConfirm) == null ? void 0 : _a.call(props, currentDate);
  };
  const onCancel = () => props.onCancel();
  const onChange = (_) => {
    var _a;
    if (picker.current) {
      const indexes = picker.current.getIndexes();
      const nextValue = updateInnerValue(indexes);
      setCurrentDate(nextValue);
      (_a = props.onChange) == null ? void 0 : _a.call(props, nextValue);
    }
  };
  useEffect(() => {
    updateColumnValue();
  }, [updateColumnValue]);
  useUpdateEffect(() => {
    const nextValue = formatValue(props.value);
    if (nextValue !== currentDate) {
      setCurrentDate(nextValue);
    }
  }, [props.value, props.filter, props.minHour, props.maxHour, props.minMinute, props.maxMinute]);
  useImperativeHandle(ref, () => ({
    getPicker: () => picker.current
  }));
  return /* @__PURE__ */ React.createElement(Picker, {
    ref: picker,
    columns,
    readonly: props.readonly,
    onChange,
    onCancel,
    onConfirm
  });
});
TimePicker.defaultProps = {
  minHour: 0,
  maxHour: 23,
  minMinute: 0,
  maxMinute: 59,
  formatter: (type, value) => value
};
var stdin_default = TimePicker;
export {
  stdin_default as default
};
