<script>
    import { onMount } from "svelte";

    import { Row, Col, Button, Icon, FormText, Styles } from "sveltestrap";

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

    import InputField from "./InputField.svelte";

    export let field = {};
    export let values = [{}];
    export let list = [];
    export let onSave = false;
    export let onRemove = false;
    export let onAdd = false;
    export let getChildren = false;
    export let small = false;
    export let strong = false;
    export let addButton = false;
    export let rows = 2;

    let displayHelp = false;
    let error = {
        required: true,
        message: false,
    };

    $: isReady = $storeMdjs;
    $: error.required = field.error.required
        ? values.filter((v) => {
              return getValue(v, field.name);
          }).length == 0
        : false;

    function getValue(md, fieldName) {
        if (getChildren) {
            return getChildren(md, fieldName) || "";
        }
        return md;
    }

    onMount(() => {});

    function onAddItem(e) {
        e.preventDefault();
        e.stopPropagation();
        if (onAdd) {
            onAdd();
        } else {
            values.push("");
            values = values;
        }
    }

    function onRemoveItem(e, id) {
        e.preventDefault();
        e.stopPropagation();
        if (onRemove) {
            onRemove(id, field.name);
        } else {
            if (values.length > 1) {
                values.splice(id, 1);
            } else {
                values[id] = "";
            }
            values = values;
        }
    }

    function onSaveItem(fieldName, fieldValue, id) {
        onSave(fieldName, fieldValue, id);
    }
</script>

<Row>
    <Col>
        {#if small}
            <small>
                {field.label}
                {#if field.error.required}
                    <span class="text-danger"> * </span>
                {/if}
            </small>
        {:else if strong}
            <strong>
                {field.label}
                {#if field.error.required}
                    <span class="text-danger"> * </span>
                {/if}
            </strong>
        {:else}
            {field.label}
            {#if field.error.required}
                <span class="text-danger"> * </span>
            {/if}
        {/if}
        <!-- If help -->
        {#if field.help}
            <span
                class="link"
                on:click={() => {
                    displayHelp = !displayHelp;
                }}
            >
                <Icon name="info-circle-fill" class="ms-1 mb-1" />
            </span>
        {/if}
        <!-- If display help -->
        {#if displayHelp}
            <FormText color="muted" class="d-block">
                {@html helpers.nl2br(field.help)}
            </FormText>
        {/if}
    </Col>
</Row>

<Row class="my-2">
    <Col>
        {#each values as value, id}
            <Row>
                <Col md="11">
                    <InputField
                        type={field.type}
                        value={getValue(value, field.name)}
                        {error}
                        field={field.name}
                        {list}
                        {id}
                        onSave={onSaveItem}
                        {rows}
                    />
                </Col>
                <Col md="1">
                    <Button
                        color="dark"
                        outline
                        class="mx-auto py-1 px-2"
                        on:click={(e) => {
                            onRemoveItem(e, id);
                        }}
                    >
                        <Icon name="dash" />
                    </Button>
                </Col>
            </Row>
        {/each}
        <Row class="justify-content-md-end">
            <Col>
                {#if $validateForm && error.required && field.error.message}
                    <small class="text-danger">{field.error.message}</small>
                {/if}
            </Col>
            {#if addButton}
                <Col md="1">
                    <Button color="dark" outline class="mx-auto py-1 px-2" on:click={onAddItem}>
                        <Icon name="plus" />
                    </Button>
                </Col>
            {/if}
        </Row>
    </Col>
</Row>
