import React, { useEffect, useState } from "react";
import "./css/time-select.css";
import DefaultDropdownButton from "../shared/DefaultDropdownButton";
const DEFAULT_VALUE = {
    hour: 4,
    minute: 0,
    meridiem: "AM",
};
export const TimeSelect = ({ initialTime, enabled = true, label = "Time:", onChange, className = "", minuteInterval = 15, }) => {
    /**
     * Prevents change event from triggering on initial setup
     */
    const [changed, setChanged] = useState(false);
    const [time, setTime] = useState(initialTime !== null && initialTime !== void 0 ? initialTime : DEFAULT_VALUE);
    let wrapClasses = `time-select ${className}`;
    if (!enabled) {
        wrapClasses = `${wrapClasses} disabled-time-select`;
    }
    // Create an array 1-12.
    let HOURS = [];
    for (let i = 1; i < 13; i++) {
        HOURS.push(i);
    }
    let MINUTES = ["00"];
    for (let i = 1; i < 60; i++) {
        if (i % minuteInterval == 0) {
            MINUTES.push(i);
        }
    }
    /**
     * This method will transform 8 PM into 20:00. It also handles when the user changes the meridiem.
     * e.g., 8PM (20) => 8AM (8).
     * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.
     * @param {event} e
     */
    const setHour = (e) => {
        let hour = Number(e);
        if (hour < 12 && time.meridiem === "PM") {
            hour = hour + 12;
        }
        else if (hour > 12 && time.meridiem === "AM") {
            hour = hour - 12;
        }
        else if (time.meridiem === "AM" && hour === 12) {
            hour = 0;
        }
        setTime({ ...time, hour });
    };
    /**
     * Set the minute, then set the 'finsemble.scheduledRestart' preference via the method on the Actions object.
     * @param {event} e
     */
    const setMinute = (e) => {
        const minute = Number(e);
        time.minute = minute;
        setTime({ ...time, minute });
    };
    /**
     * Sets the meridiem for the time (AM or PM). This will trigger setHour to be called in a hook
     * @param {event} e
     */
    const setMeridiem = (e) => {
        const meridiem = e;
        setTime({ ...time, meridiem });
    };
    const correctMeridiem = () => {
        if (!time.meridiem) {
            let localMeridiem = "AM";
            if (time.hour > 12 || (time.hour == 0 && time.minute == 0)) {
                localMeridiem = "PM";
            }
            setMeridiem(localMeridiem);
        }
    };
    /**
     * The meridiem has changed, update the hour
     */
    useEffect(() => {
        setHour(time.hour);
    }, [time.meridiem]);
    /**
     * Call on change when the hour and minute values have changed
     */
    useEffect(() => {
        correctMeridiem();
        if (enabled && onChange && changed) {
            onChange(time);
        }
    }, [time.hour, time.minute]);
    const hourOptions = HOURS.map((hour) => {
        return {
            optionLabel: hour,
            optionValue: hour,
            clickHandler: () => {
                setChanged(true);
                setHour(hour);
            },
        };
    });
    const minuteOptions = MINUTES.map((minute) => {
        return {
            optionLabel: minute,
            optionValue: minute,
            clickHandler: () => {
                setChanged(true);
                setMinute(minute);
            },
        };
    });
    const getDisplayHour = () => {
        if (time.meridiem === "AM" && time.hour === 0) {
            return 12;
        }
        else if (time.meridiem === "PM" && time.hour > 12) {
            return time.hour - 12;
        }
        else {
            return time.hour;
        }
    };
    const getDisplayMinute = () => {
        if (time.minute === 0)
            return "00";
        else {
            return String(time.minute).length === 1 ? `0${time.minute}` : time.minute;
        }
    };
    return (React.createElement("div", { className: wrapClasses, style: { display: "flex" } },
        React.createElement("span", { className: "time-select-label" }, label),
        React.createElement("div", { className: "row-section", style: { width: "10px", marginRight: "40px" } },
            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: hourOptions, buttonLabel: `Hour, ${getDisplayHour().toString()}`, defaultSelection: {
                    optionLabel: getDisplayHour().toString(),
                    optionValue: getDisplayHour(),
                    clickHandler: () => {
                        setHour(getDisplayHour());
                    },
                }, enabled: enabled })),
        React.createElement("div", { className: "row-section", style: { marginLeft: 30, marginRight: 10, marginTop: 5 } }, "\u00A0:\u00A0"),
        React.createElement("div", { style: { width: "10px", marginRight: "65px" } },
            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: minuteOptions, buttonLabel: `Minute, ${getDisplayMinute()}`, defaultSelection: {
                    optionLabel: getDisplayMinute(),
                    optionValue: time.minute,
                    clickHandler: () => {
                        setMinute(time.minute);
                    },
                }, enabled: enabled })),
        "\u00A0",
        React.createElement("div", { className: "row-section", style: { width: "10px" } },
            React.createElement(DefaultDropdownButton, { classNames: "push-right", allowEmpty: false, caretLocation: "right", buttonOptions: [
                    {
                        optionLabel: "AM",
                        optionValue: "AM",
                        clickHandler: () => {
                            setChanged(true);
                            setMeridiem("AM");
                        },
                    },
                    {
                        optionLabel: "PM",
                        optionValue: "PM",
                        clickHandler: () => {
                            setChanged(true);
                            setMeridiem("PM");
                        },
                    },
                ], defaultSelection: {
                    optionLabel: time.meridiem,
                    optionValue: time.meridiem,
                    clickHandler: () => {
                        setHour(time.meridiem);
                    },
                }, enabled: enabled }))));
};
//# sourceMappingURL=TimeSelect.js.map