<script>
    import Datalist from "./Datalist.svelte";
    import {onMount} from "svelte";
    import flatpickr from "flatpickr";
    import "flatpickr/dist/flatpickr.css";
    import "flatpickr/dist/themes/light.css";
    import {getErrorMessage} from "./errorMessage";
    import Icon from "../../common/Icon.svelte";

    export let field;
    export let value;
    export let isCreateMode;
    export let validationErrors;
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    $: search = "";
    $: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
    $: errorMessage = getErrorMessage(validationErrors, field.name);

    export let id;
    let list;
    let pickerInput;
    let pickerInstance;
    let flatpickrOptions = {
        enableTime: false,
        allowInput: true,
        altInput: true,
        altFormat: "Y-m-d H:i:S",
        dateFormat: "Z",
        enableTime: true,
        time_24hr: true,
        enableSeconds: true,
    };

    if (field.min) {
        flatpickrOptions.minDate = field.min;
    }

    if (field.max) {
        flatpickrOptions.maxDate = field.max;
    }

    onMount(() => {
        if (!field.readonly || isCreateMode) {
            if (listMode) {
                flatpickrOptions.clickOpens = false;
            }
            pickerInstance = flatpickr(pickerInput, flatpickrOptions);
        }
    });
</script>

<div class="mb-0">
    {#if listMode}
        <div class="dropdown d-flex">
            <input
                type="search"
                {id}
                on:keyup={list.update}
                on:focus={list.update}
                class="form-control dropdown-toggle"
                class:is-invalid={errorMessage}
                bind:value={search}
                bind:this={pickerInput}
                placeholder="Search for options"
                data-bs-toggle="dropdown"
                autocomplete="off"
                readonly={field.readonly && !isCreateMode}
            />
            <button
                class="btn btn-light ms-1"
                on:click|preventDefault={(e) => pickerInstance.open()}
            >
                <Icon icon="calendar"/>
            </button>
            <ul class="dropdown-menu w-100">
                {#if field.optionsFrom}
                    <Datalist
                        {field}
                        bind:this={list}
                        bind:value
                        bind:search
                    />
                {/if}
            </ul>
        </div>
        {#if value}
            <span class="badge rounded-pill bg-light text-dark  fs-6 mt-3">
                <div class="d-flex align-items-center ">
                    {value}
                    <button
                        on:click|preventDefault={(e) => (value = "")}
                        type="button"
                        class="btn-close btn-sm  ms-1"
                        style="font-size:10px"
                        aria-label="Close"
                    />
                </div>
            </span>
        {/if}
    {:else}
        <input
            type="text"
            {id}
            class="form-control"
            class:is-invalid={errorMessage}
            bind:value
            bind:this={pickerInput}
            autocomplete="off"
            readonly={field.readonly && !isCreateMode}
        />
    {/if}
    <small class=" text-primary  opacity-50"
    >Dates are displayed according to your timezone: {timezone}</small
    >

    {#if errorMessage}
        <div class="invalid-feedback d-block">
            {errorMessage}
        </div>
    {/if}
</div>
