<script>
    import { onMount } from "svelte";
    import { FormGroup, Input, Label, FormText, Icon } from "sveltestrap";

    import { storeMdjs } from "@/stores/mdjs.store";
    import { XmlConverter } from "@/libs/xml-converter/xml-converter";
    import helpers from "@/libs/helpers";

    const converter = new XmlConverter();

    export let value = "";
    export let hidden = false;
    export let type = "text";
    export let editable = true;
    export let label = "";
    export let rows = 8;
    export let list = [];
    export let help = "";
    export let field = "field";
    export let space = "md";
    export let small = false;
    export let strong = false;
    export let placeholder = "";
    export let error = {
        required: false,
        message: "",
    };
    export let onSave = false;
    export let id = 0;
    export let disabled = false;
    export let css = "";
    export let emptyOption = true;

    let displayHelp = false;

    $: value = Array.isArray(value) ? value[0] : value;

    onMount(() => {});

    function onBlur() {
        if (onSave) {
            onSave(field, value, id);
        } else {
            $storeMdjs = converter.setValue($storeMdjs, field, [value], space);
        }
    }

    $: isReady = true;
</script>

{#if isReady && !hidden}
    <FormGroup class={css}>
        <!-- If label -->
        {#if label}
            <Label for={field + "-" + id} title={help} class="m-0 mb-2">
                {#if small}
                    <small>
                        {label}
                        {#if error.required}
                            <span class="text-danger"> * </span>
                        {/if}
                    </small>
                {:else if strong}
                    <strong>
                        {label}
                        {#if error.required}
                            <span class="text-danger"> * </span>
                        {/if}
                    </strong>
                {:else}
                    {label}
                    {#if error.required}
                        <span class="text-danger"> * </span>
                    {/if}
                {/if}
                <!-- If help -->
                {#if help}
                    <span
                        class="link"
                        on:click={() => {
                            displayHelp = !displayHelp;
                        }}
                    >
                        <Icon name="info-circle-fill" class="ms-1 mb-1" />
                    </span>
                {/if}
            </Label>
            <!-- If display help -->
            {#if displayHelp}
                <FormText color="muted mb-2 d-block">
                    {@html helpers.nl2br(help)}
                </FormText>
            {/if}
        {/if}
        <!-- If editable or not -->
        {#if editable}
            {#if type == "textarea"}
                <Input
                    id={field + "-" + id}
                    {type}
                    bind:value
                    on:blur={onBlur}
                    {rows}
                    required={error.required}
                    {disabled}
                />
            {:else if type == "select"}
                <Input
                    id={field + "-" + id}
                    {type}
                    name={field + "-" + id}
                    bind:value
                    on:blur={onBlur}
                    required={error.required}
                    {disabled}
                >
                    {#if emptyOption}
                        <option selected value="" />
                    {/if}
                    {#each list as item}
                        <option value={item.value}>{item.text}</option>
                    {/each}
                </Input>
            {:else}
                <Input
                    id={field + "-" + id}
                    name={field + "-" + id}
                    list={field + "-list-" + id}
                    {type}
                    bind:value
                    on:blur={onBlur}
                    {placeholder}
                    required={error.required}
                    {disabled}
                />
                {#if list && list.length}
                    <datalist id={field + "-list-" + id}>
                        {#each list as item}
                            <option value={item.value} label={item.value}>{item.value}</option>
                        {/each}
                    </datalist>
                {/if}
            {/if}
        {:else if small}
            <small>
                <div id={field + "-" + id}>{value}</div>
            </small>
        {:else}
            <div id={field + "-" + id}>{value}</div>
        {/if}
        <!-- If error -->
        {#if error.required && error.message}
            <div class="invalid-feedback">{error.message}</div>
        {/if}
    </FormGroup>
{/if}

<style>
</style>
