import React, { useCallback, useEffect, useState } from "react";
import { Modal } from "../../ui/modal/Modal.js";
import { ModalButtons } from "../../ui/modal/ModalButtons.js";
import { StyledWheelHighlight, StyledWheelsContainer, StyledWheelSeparator, } from "./TimePicker.styled.js";
import { padTwo, parseTimeText } from "./utils.js";
import { Wheel } from "./Wheel.js";
const snapToStep = (v, step, max) => {
    const snapped = Math.round(v / step) * step;
    return Math.min(snapped, max - (max % step === 0 ? step : max % step));
};
const TimePickerModal = ({ isOpen, initialValue, withSeconds, minuteStep, secondStep, readOnly, title, okLabel, cancelLabel, onClose, onConfirm, }) => {
    const [draftHours, setDraftHours] = useState(0);
    const [draftMinutes, setDraftMinutes] = useState(0);
    const [draftSeconds, setDraftSeconds] = useState(0);
    useEffect(() => {
        if (!isOpen) {
            return;
        }
        const digits = parseTimeText(initialValue, withSeconds);
        const hh = digits.length >= 2 ? parseInt(digits.slice(0, 2), 10) : 0;
        const mmRaw = digits.length >= 4 ? parseInt(digits.slice(2, 4), 10) : 0;
        const ssRaw = digits.length >= 6 ? parseInt(digits.slice(4, 6), 10) : 0;
        setDraftHours(hh);
        setDraftMinutes(snapToStep(mmRaw, minuteStep, 60));
        setDraftSeconds(snapToStep(ssRaw, secondStep, 60));
    }, [isOpen, initialValue, withSeconds, minuteStep, secondStep]);
    const handleConfirm = useCallback(() => {
        const next = padTwo(draftHours) + ":" + padTwo(draftMinutes)
            + (withSeconds ? ":" + padTwo(draftSeconds) : "");
        onConfirm(next);
    }, [draftHours, draftMinutes, draftSeconds, withSeconds, onConfirm]);
    const handleWheelsKeyDown = useCallback((e) => {
        if (e.key === "Enter" && !readOnly) {
            e.preventDefault();
            handleConfirm();
        }
    }, [readOnly, handleConfirm]);
    return (React.createElement(Modal, { isOpen: isOpen, onClose: onClose, title: title },
        React.createElement(StyledWheelsContainer, { onKeyDown: handleWheelsKeyDown },
            React.createElement(Wheel, { count: 24, step: 1, value: draftHours, onChange: setDraftHours, ariaLabel: "Hours", autoFocus: true }),
            React.createElement(StyledWheelSeparator, null, ":"),
            React.createElement(Wheel, { count: 60, step: minuteStep, value: draftMinutes, onChange: setDraftMinutes, ariaLabel: "Minutes" }),
            withSeconds
                ? (React.createElement(React.Fragment, null,
                    React.createElement(StyledWheelSeparator, null, ":"),
                    React.createElement(Wheel, { count: 60, step: secondStep, value: draftSeconds, onChange: setDraftSeconds, ariaLabel: "Seconds" })))
                : null,
            React.createElement(StyledWheelHighlight, { "aria-hidden": true })),
        React.createElement(ModalButtons, null,
            React.createElement(ModalButtons.Button, { onClick: onClose }, cancelLabel),
            readOnly
                ? null
                : (React.createElement(ModalButtons.Button, { variant: "main", onClick: handleConfirm }, okLabel)))));
};
export { TimePickerModal };
//# sourceMappingURL=TimePickerModal.js.map