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

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

    import MultiInputField from "./elements/MultiInputField.svelte";

    export let field;
    export let list = [];

    let values = [];

    $: isReady = $storeMdjs;

    const converter = new XmlConverter();

    $: {
        values = $storeMdjs ? converter.getValue($storeMdjs, field.name) : [{}];
        values = helpers.cleanValues(values, false, true);
    }

    onMount(() => {});

    function onRemove(id) {
        if (values.length > 1) {
            values.splice(id, 1);
        } else {
            values[id] = "";
        }
        $storeMdjs = converter.setValue($storeMdjs, field.name, values);
    }

    function onSave(fieldName, fieldValue, id) {
        values[id] = fieldValue;
        $storeMdjs = converter.setValue($storeMdjs, field.name, values);
    }
</script>

{#if isReady}
    <MultiInputField {field} {values} {list} {onSave} {onRemove} strong={true} />
{/if}

<style>
</style>
