import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { Fragment, useEffect, useLayoutEffect, useMemo, useState, } from "react";
export function calculateTimeFromTimespan(timespan) {
    const secondsFraction = timespan / 1000;
    const seconds = Math.round(secondsFraction);
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    return {
        hours,
        minutes: minutes % 60,
        seconds: seconds % 60,
    };
}
const IntegerFormatter = new Intl.NumberFormat(undefined, {
    minimumIntegerDigits: 2,
});
export var CountdownTextModel;
(function (CountdownTextModel) {
    /** This shows the countdown on the format 00:00:00 */
    CountdownTextModel[CountdownTextModel["CLOCK"] = 0] = "CLOCK";
    /** This shows the countdown on the format 00h 00m 00s */
    CountdownTextModel[CountdownTextModel["SHORT"] = 1] = "SHORT";
})(CountdownTextModel || (CountdownTextModel = {}));
/**
 * You five it some time, and a countdown is shown
 **/
/**
 * A countdown timer that shows how much time is left until a specific moment.
 * It can display time in two formats: as a clock (00:00:00) or in a short format (00h 00m 00s).
 */
export default function Countdown({ timeRemaining, onFinish, model = CountdownTextModel.CLOCK, options, }) {
    const [t, setT] = useState(() => calculateTimeFromTimespan(timeRemaining));
    const onFinishRef = React.useRef(onFinish);
    useEffect(() => {
        onFinishRef.current = onFinish;
    }, [onFinish]);
    useLayoutEffect(() => {
        setT(calculateTimeFromTimespan(timeRemaining));
    }, [timeRemaining]);
    useEffect(() => {
        const targetDate = Date.now() + timeRemaining;
        const tick = () => {
            const timeLeft = targetDate - Date.now();
            if (timeLeft <= 800) {
                setT(calculateTimeFromTimespan(0));
                if (onFinishRef.current)
                    onFinishRef.current();
                clearInterval(cl);
            }
            else {
                setT(calculateTimeFromTimespan(timeLeft));
            }
        };
        const cl = setInterval(tick, 1000);
        return () => {
            clearInterval(cl);
        };
    }, [timeRemaining]);
    const txt = useMemo(() => {
        switch (model) {
            case CountdownTextModel.CLOCK:
                const hourFragment = (options?.hours ?? true) ? `${IntegerFormatter.format(t.hours)}:` : "";
                return (_jsx(Fragment, { children: `${hourFragment}${IntegerFormatter.format(t.minutes)}:${IntegerFormatter.format(t.seconds)}` }));
            case CountdownTextModel.SHORT:
                const hourFragmentS = (options?.hours ?? true) ? (_jsxs(_Fragment, { children: [IntegerFormatter.format(t.hours), _jsx("span", { children: "h" }), "\u00A0"] })) : ("");
                return (_jsxs(Fragment, { children: [hourFragmentS, IntegerFormatter.format(t.minutes), _jsx("span", { children: "m" }), "\u00A0", IntegerFormatter.format(t.seconds), _jsx("span", { children: "s" })] }));
        }
    }, [t, model]);
    return _jsx("span", { children: txt });
}
//# sourceMappingURL=Countdown.js.map