import { useEffect, useRef, useState } from "preact/hooks";
import { DateTime } from "luxon";
import { useFlash } from "../App/FlashContext";

export const TimeInput = ({ defaultValue, onInput }) => {
    const ref = useRef(null);

    const [time, setTime] = useState(defaultValue);

    useEffect(() => {
        onInput(time);
    }, [time]);

    const flash = useFlash();

    return (
        <>
            <div
                class={"input"}
                onPaste={(ev) => {
                    ev.preventDefault();
                    const pasteValue = ev.clipboardData.getData("text/plain");
                    let dt = DateTime.fromISO(pasteValue);

                    if (dt.isValid) {
                        setTime(dt);
                        return;
                    }

                    dt = DateTime.fromSQL(pasteValue);

                    if (dt.isValid) {
                        setTime(dt);
                        return;
                    }

                    flash({
                        message: `Couldn't parse your clipboard data as a valid date-time`,
                        type: "error",
                    });
                }}
            >
                <div style={{ flexGrow: "1" }}>
                    <label>
                        <span class="is-sr-only">Years input</span>
                        <input
                            style={{
                                borderStyle: "none",
                                fontFamily: "monospace",
                                width: "calc(4ch + 4px)",
                                fontSize: "1rem",
                            }}
                            type="text"
                            pattern="\d*"
                            maxlength={4}
                            placeholder="YYYY"
                            value={time?.year.toLocaleString("en-US", {
                                minimumIntegerDigits: 4,
                                useGrouping: false,
                            })}
                            onBlur={(ev) => {
                                setTime(time.set({ year: ev.currentTarget.value }));
                            }}
                        ></input>{" "}
                    </label>
                    -
                    <label>
                        <span class="is-sr-only">Months input</span>
                        <input
                            style={{
                                borderStyle: "none",
                                fontFamily: "monospace",
                                width: "calc(2ch + 4px)",
                                fontSize: "1rem",
                            }}
                            type="text"
                            pattern="\d*"
                            maxlength={2}
                            placeholder="MM"
                            value={time?.month.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
                            onBlur={(ev) => {
                                setTime(time.set({ month: ev.currentTarget.value }));
                            }}
                        ></input>{" "}
                    </label>
                    -
                    <label>
                        <span class="is-sr-only">Days input</span>
                        <input
                            style={{
                                borderStyle: "none",
                                fontFamily: "monospace",
                                width: "calc(2ch + 4px)",
                                fontSize: "1rem",
                            }}
                            type="text"
                            pattern="\d*"
                            maxlength={2}
                            placeholder="DD"
                            value={time?.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
                            onBlur={(ev) => {
                                setTime(time.set({ day: ev.currentTarget.value }));
                            }}
                        ></input>{" "}
                    </label>
                    <label style={{ marginLeft: "8px" }}>
                        <span class="is-sr-only">Hours input</span>
                        <input
                            style={{
                                borderStyle: "none",
                                fontFamily: "monospace",
                                width: "calc(2ch + 4px)",
                                fontSize: "1rem",
                            }}
                            type="text"
                            pattern="\d*"
                            maxlength={2}
                            placeholder="hh"
                            value={time?.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
                            onBlur={(ev) => {
                                setTime(time.set({ hour: ev.currentTarget.value }));
                            }}
                        ></input>{" "}
                    </label>
                    :
                    <label>
                        <span class="is-sr-only">Minutes input</span>
                        <input
                            style={{
                                borderStyle: "none",
                                fontFamily: "monospace",
                                width: "calc(2ch + 4px)",
                                fontSize: "1rem",
                            }}
                            type="text"
                            pattern="\d*"
                            maxlength={2}
                            placeholder="mm"
                            value={time?.minute.toLocaleString("en-US", {
                                minimumIntegerDigits: 2,
                            })}
                            onBlur={(ev) => {
                                setTime(time.set({ minute: ev.currentTarget.value }));
                            }}
                        ></input>{" "}
                    </label>
                    :
                    <label>
                        <span class="is-sr-only">Seconds input</span>
                        <input
                            style={{
                                borderStyle: "none",
                                fontFamily: "monospace",
                                width: "calc(2ch + 4px)",
                                fontSize: "1rem",
                            }}
                            type="text"
                            pattern="\d*"
                            maxlength={2}
                            placeholder="ss"
                            value={time?.second.toLocaleString("en-US", {
                                minimumIntegerDigits: 2,
                            })}
                            onBlur={(ev) => {
                                setTime(time.set({ second: ev.currentTarget.value }));
                            }}
                        ></input>{" "}
                    </label>
                </div>
                <button
                    style={{
                        background: "none",
                        border: "none",
                        padding: "1px",
                        marginRight: "-3px",
                    }}
                    onClick={() => {
                        ref.current.showPicker();
                    }}
                >
                    <span class="is-sr-only">Show time picker</span>
                    <span class="icon">
                        <i class="fas fa-calendar"></i>
                    </span>
                </button>
            </div>
            <input
                style={{
                    position: "absolute",
                    left: 0,
                    visibility: "hidden",
                }}
                class={"input"}
                type="datetime-local"
                step="1"
                value={
                    time
                        ? time.toFormat("yyyy-LL-dd'T'HH:mm:ss")
                        : DateTime.now().toFormat("yyyy-LL-dd'T'HH:mm:ss")
                }
                ref={ref}
                onInput={(ev) => {
                    setTime(DateTime.fromISO(ev.currentTarget.value));
                }}
            ></input>
        </>
    );
};
