<script lang="ts">
    import { mdiInformationOutline } from "@mdi/js"

    import Icon from "./Icon.svelte"
    import { tooltip } from "../../functions/utils"

    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}
            onchange={onChange}
            bind:checked={value}
        />
        <button
            type="button"
            class="checkit-span"
            aria-label="Toggle checkbox"
            tabindex={0}
            onclick={() => {
                value = !value
                setTimeout(() => {
                    const event = new Event("change", { bubbles: true })
                    document.getElementById(id)?.dispatchEvent(event)
                }, 10)
            }}
            onkeydown={(e) => {}}
        ></button>
    {/if}
    {#if type == "password"}
        <input
            {...attributes}
            onblur={onChange}
            bind:value
            onchange={onChange}
            type="password"
            class="sentry-mask"
        />
    {/if}
    {#if type == "text"}
        <input
            onblur={onChange}
            {...attributes}
            bind:value
            onchange={onChange}
        />
    {/if}
    {#if type == "textarea"}
        <textarea
            onblur={onChange}
            {...attributes}
            bind:value
            onchange={onChange}
        ></textarea>
    {/if}
    {#if type == "number"}
        <input
            onblur={onChange}
            type="number"
            {...attributes}
            bind:value
            onchange={onChange}
        />
    {/if}
    {#if type == "noInput"}
        <div class="no-input">
            {#if id.includes("pass")}
                ************
            {:else}
                {Boolean(value) ? value : "-"}
            {/if}
        </div>
    {/if}
    {#if type == "select"}
        <select
            onchange={onChange}
            {...attributes}
            bind: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>
