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

    import { storeMdjs, storeThemeKeywords } 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 = [];

    $: isReady = $storeMdjs;

    function getValues(mdjs) {
        var keywords = mdjs ? converter.getValue(mdjs, field.name) : [{}];
        var keywordsList = [];
        var themeKeywordsList = [];
        for (let k = 0; k < keywords.length; k++) {
            var thesaurusName = converter.getValue(keywords[k], "thesaurusName")[0];
            var keyword = converter.getValue(keywords[k], "keyword");
            if (keyword[0]) {
                if (thesaurusName && thesaurusName.toLowerCase().includes("dge-tod")) {
                    for (let kw = 0; kw < keyword.length; kw++) {
                        let themeKeyword = JSON.parse(JSON.stringify(keywords[k]));
                        themeKeyword = converter.setValue(themeKeyword, "keyword", [keyword[kw]]);
                        themeKeywordsList.push(themeKeyword);
                    }
                } else {
                    keywordsList.push(keywords[k]);
                }
            }
        }

        // Save keywords liste without themeKeywords in $storeMdjs
        converter.setValue($storeMdjs, "dataKeywords", keywordsList);
        // Clean and return themeKeywords list
        themeKeywordsList = helpers.cleanValues(themeKeywordsList, "keyword");
        return themeKeywordsList;
    }

    $: {
        // Keep this 2 variables attribution to clean keywords list for each component reload
        let themeKeywords = helpers.cleanValues($storeThemeKeywords, "keyword");
        let otherKeywords = getValues($storeMdjs);
        $storeThemeKeywords = themeKeywords.length > 0 ? themeKeywords : otherKeywords;
        $storeThemeKeywords.push({});
        $storeThemeKeywords = $storeThemeKeywords;
    }

    function getChildren(data, fieldName) {
        return converter.getValue(data, fieldName)[0] || "";
    }

    const converter = new XmlConverter();

    onMount(() => {});

    function onRemove(id) {
        $storeThemeKeywords.splice(id, 1);
        $storeThemeKeywords = $storeThemeKeywords;
    }

    function onSave(fieldName, fieldValue, id) {
        if (fieldValue) {
            let themeKeyword = converter.setValue({}, fieldName, [fieldValue]);
            themeKeyword = converter.setValue(themeKeyword, "keywordType", ["Theme"]);
            themeKeyword = converter.setValue(themeKeyword, "thesaurusName", [
                "DataGrandEst - Thèmes open data, version 1.0 (dge-tod)",
            ]);
            themeKeyword = converter.setValue(themeKeyword, "thesaurusDatePublication", ["2021-11-01"]);
            $storeThemeKeywords[id] = themeKeyword;
        } else {
            $storeThemeKeywords[id] = {};
        }
        $storeThemeKeywords = helpers.cleanValues($storeThemeKeywords, "keyword", true);
    }
</script>

{#if isReady}
    <MultiInputField
        field={field.children.keyword}
        {list}
        values={$storeThemeKeywords}
        {onSave}
        {onRemove}
        {getChildren}
        strong={true}
    />
{/if}

<style>
</style>
