<script lang="ts">
    import LL from "$app/lib/i18n/i18n-svelte";
    import { Temporal } from "@js-temporal/polyfill";

    // TIME
    let fromTimeValue = "";
    let fromTimeError = "";
    let toTimeValue = "";
    let toTimeError = "";

    function handle_from_time_changed(e) {
        fromTimeValue = e.target.value;
        if (fromTimeValue) {
            fromTimeError = "";
        }
    }

    function handle_to_time_changed(e) {
        toTimeValue = e.target.value;
        if (toTimeValue) {
            toTimeError = "";
        }
    }

    // DATE
    let date = Temporal.Now.plainDateTimeISO().toString().substring(0, 10);
    let dateError = "";

    function is_valid() {
        let isValid = true;
        let focusIsSet = false;
        if (!date) {
            dateError = $LL.views.entryForm.dateTime.errDateIsRequired();
            isValid = false;
            if (!focusIsSet) {
                document.getElementById("date")?.focus();
                focusIsSet = true;
            }
        } else {
            dateError = "";
        }

        if (!fromTimeValue) {
            fromTimeError = $LL.views.entryForm.dateTime.errFromIsRequired();
            isValid = false;
            if (!focusIsSet) {
                document.getElementById("from")?.focus();
                focusIsSet = true;
            }
        } else if (toTimeValue && fromTimeValue > toTimeValue) {
            fromTimeError = $LL.views.entryForm.dateTime.errFromAfterTo();
            isValid = false;
            if (!focusIsSet) {
                document.getElementById("from")?.focus();
                focusIsSet = true;
            }
        } else if (fromTimeValue === toTimeValue) {
            fromTimeError = $LL.views.entryForm.dateTime.errFromEqTo();

            isValid = false;
            if (!focusIsSet) {
                document.getElementById("from")?.focus();
                focusIsSet = true;
            }
        } else {
            fromTimeError = "";
        }

        if (!toTimeValue) {
            toTimeError = $LL.views.entryForm.dateTime.errToIsRequired();
            isValid = false;
            if (!focusIsSet) {
                document.getElementById("to")?.focus();
                focusIsSet = true;
            }
        } else if (fromTimeValue && toTimeValue < fromTimeValue) {
            toTimeError = $LL.views.entryForm.dateTime.errToBeforeFrom();
            isValid = false;
            if (!focusIsSet) {
                document.getElementById("to")?.focus();
                focusIsSet = true;
            }
        } else {
            toTimeError = "";
        }

        return isValid;
    }

    export const functions = {
        get_from_time_value() {
            return fromTimeValue;
        },
        get_to_time_value() {
            return toTimeValue;
        },
        get_date() {
            return date;
        },
        is_valid,
        reset(focusDate = false) {
            fromTimeValue = "";
            toTimeValue = "";
            if (focusDate) {
                document.getElementById("date")?.focus();
            }
            console.log($LL.views.entryForm.dateTime._logReset());
        },
        set_times(value) {
            fromTimeValue = value.from.toPlainTime().toString().substring(0, 5);
            toTimeValue = value.to.toPlainTime().toString().substring(0, 5);
        },
        set_date(new_date: Temporal.PlainDate) {
            date = new_date.toString();
        },
        set_values(values) {
            const currentTimeZone = Temporal.Now.timeZone().id;
            const startDate = Temporal.Instant.from(values.start);
            const stopDate = Temporal.Instant.from(values.stop);
            fromTimeValue = startDate.toZonedDateTimeISO(currentTimeZone).toPlainTime().toString().substring(0, 5);
            toTimeValue = stopDate.toZonedDateTimeISO(currentTimeZone).toPlainTime().toString().substring(0, 5);
            date = startDate.toZonedDateTimeISO(currentTimeZone).toPlainDate().toString();
        }
    };
</script>

<div class="grid gap-xs">
    <div class="col-4">
        <label for="date"
               class="form-label margin-bottom-xxs">{$LL.views.entryForm.dateTime.date()}</label>
        <input type="date"
               id="date"
               class="form-control width-100%"
               bind:value={date}>
        {#if dateError}
            <small class="color-error">{dateError}</small>
        {/if}
    </div>
    <div class="col-4">
        <label for="from"
               class="form-label margin-bottom-xxs">{$LL.views.entryForm.dateTime.from()}</label>
        <input id="from"
               class="form-control width-100%"
               pattern="[0-9][0-9]:[0-9][0-9]"
               type="time"
               bind:value={fromTimeValue}
               on:input={handle_from_time_changed}
        />
        {#if fromTimeError}
            <small class="color-error">{fromTimeError}</small>
        {/if}
    </div>
    <div class="col-4">
        <label for="to"
               class="form-label margin-bottom-xxs">{$LL.views.entryForm.dateTime.to()}</label>
        <input id="to"
               class="form-control  width-100%"
               pattern="[0-9][0-9]:[0-9][0-9]"
               type="time"
               bind:value={toTimeValue}
               on:input={handle_to_time_changed}
        />
        {#if toTimeError}
            <small class="color-error">{toTimeError}</small>
        {/if}
    </div>
</div>
