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

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

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

    export let field;
    export let list = [];

    $: isReady = $storeMdjs;
    $: values = $storeMdjs ? converter.getValue($storeMdjs, field.name) : [{}];

    const converter = new XmlConverter();

    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) {
        if (fieldValue) {
            values[id] = fieldValue;
            $storeMdjs = converter.setValue($storeMdjs, field.name, values);
        }
    }
</script>

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

<style>
</style>
