<script lang="ts">
    import { mdiInformationOutline } from "@mdi/js"
    import { tooltip } from "../../../../functions/utils"
    import Icon from "../../../widgets/Icon.svelte"

    export let value: any,
        id,
        classList: string = "",
        onChange: (e: Event) => void,
        type: "password" | "text" | "number" | "checkbox" | "noInput" | "textarea" | "select" = "text",
        placeholder: string = "",
        disabled: boolean = false,
        name = "",
        options: { name: string; value: string }[] = [],
        selectedOptionIndex = 0,
        helperText = ""

    $: hasValue = Boolean(value)

    const attributes = {
        id,
        class: classList,
        placeholder,
        name: name || id,
        disabled: !!disabled,
    }
</script>

<label
    style=""
    class:textarea="{type == 'textarea'}"
    class:checkbox="{type == 'checkbox'}"
>
    {#if type !== "checkbox"}
        <span class:hasValue="{hasValue || type === 'noInput'}">{placeholder}</span>
    {/if}
    {#if type == "checkbox"}
        <input
            type="checkbox"
            {...attributes}
            on:change="{onChange}"
            bind:checked="{value}"
        />
        <button
            type="button"
            class="checkit-span"
            aria-label="Toggle checkbox"
            tabindex="{0}"
            on:click="{() => {
                value = !value
                setTimeout(() => {
                    const event = new Event('change', { bubbles: true })
                    document.getElementById(id)?.dispatchEvent(event)
                }, 10)
            }}"
            on:keydown="{(e) => {}}"></button>
    {/if}
    {#if type == "password"}
        <input
            {...attributes}
            on:blur="{onChange}"
            bind:value="{value}"
            on:change="{onChange}"
            type="password"
            class="sentry-mask"
        />
    {/if}
    {#if type == "text"}
        <input
            on:blur="{onChange}"
            {...attributes}
            bind:value="{value}"
            on:change="{onChange}"
        />
    {/if}
    {#if type == "textarea"}
        <textarea
            on:blur="{onChange}"
            {...attributes}
            bind:value="{value}"
            on:change="{onChange}"></textarea>
    {/if}
    {#if type == "number"}
        <input
            on:blur="{onChange}"
            type="number"
            {...attributes}
            bind:value="{value}"
            on:change="{onChange}"
        />
    {/if}
    {#if type == "noInput"}
        <div class="no-input">
            {#if id.includes("pass")}
                ************
            {:else}
                {Boolean(value) ? value : "-"}
            {/if}
        </div>
    {/if}
    {#if type == "select"}
        <select
            on:change="{onChange}"
            {...attributes}
            bind:value="{value}"
        >
            {#each options as option, index}
                <option
                    value="{option.value}"
                    selected="{index === selectedOptionIndex}"
                >
                    {option.name}
                </option>
            {/each}
        </select>
    {/if}
    {#if type !== "checkbox"}
        <span class="underline"></span>
    {/if}
    {#if helperText}
        <div
            use:tooltip="{{
                content: helperText,
            }}"
            class="helperText"
        >
            <Icon path="{mdiInformationOutline}" />
        </div>
    {/if}
</label>

<style lang="less">
    .checkbox {
        width: 1.2rem !important;
    }
    .helperText {
        position: absolute;
        right: 0px;
        color: var(--bg-100);
        top: 50%;
        transform: translateY(-50%);
    }
</style>
