<script>
    import { Row, Col, Button, Icon } from "sveltestrap";

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

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

    export let field;
    export let keywordTypes = [];
    export let value = [];
    export let id = 0;
    export let onRemoveItem = false;
    export let onSaveItem = false;

    let keyword = "";
    let keywordType = "";
    let thesaurusName = "";
    let thesaurusDatePublication = "";

    $: isReady = $storeMdjs;
    $: keyword = getValue(value, "keyword");
    $: keywordType = getValue(value, "keywordType");
    $: thesaurusName = getValue(value, "thesaurusName");
    $: thesaurusDatePublication = getValue(value, "thesaurusDatePublication");

    // function getValue(md, fieldName) {
    //     var values = converter.getValue(md, fieldName) || [""];
    //     return values
    //         .flat(1)
    //         .map((v) => v.trim())
    //         .join(", ");
    // }

    function getValue(md, fieldName) {
        var values = converter.getValue(md, fieldName) || [""];
        return values
            .reduce((acc, val) => acc.concat(val), [])
            .map((v) => v.trim())
            .join(", ");
    }

    const converter = new XmlConverter();

    function onSave(fieldName, fieldValue) {
        // TODO: mettre la liste des séparateurs de mots-clés dans le fichier de config
        const separators = ["\n", ",", ";"];
        // var fieldValue = fieldValue
        //     .split(new RegExp(separators.join("|"), "g"))
        //     .flat(1)
        //     .map((v) => v.trim());
        var fieldValue = fieldValue
            .split(new RegExp(separators.join("|"), "g"))
            .reduce((acc, val) => acc.concat(val), [])
            .map((v) => v.trim());
        value = converter.setValue(value, fieldName, fieldValue);
        onSaveItem(fieldName, value, id);
    }

    function onRemove(e) {
        e.preventDefault();
        e.stopPropagation();
        if (onRemoveItem) {
            onRemoveItem(id);
        }
    }
</script>

{#if isReady}
    <Row>
        <Col md="11">
            <Row>
                <Col md="8">
                    <InputField
                        label={field.keyword.label}
                        type={field.keyword.type}
                        value={keyword}
                        help={field.keyword.help}
                        error={field.keyword.error}
                        field={field.keyword.name}
                        rows={2}
                        {id}
                        {onSave}
                    />
                </Col>
                <Col md="4" class="">
                    <InputField
                        label={field.keywordType.label}
                        type={field.keywordType.type}
                        value={keywordType}
                        help={field.keywordType.help}
                        error={field.keywordType.error}
                        field={field.keywordType.name}
                        list={keywordTypes}
                        {id}
                        {onSave}
                    />
                </Col>
            </Row>
            <Row class="">
                <Col md="8" class="">
                    <InputField
                        label={field.thesaurusName.label}
                        type={field.thesaurusName.type}
                        value={thesaurusName}
                        help={field.thesaurusName.help}
                        error={field.thesaurusName.error}
                        field={field.thesaurusName.name}
                        {id}
                        {onSave}
                    />
                </Col>
                <Col md="4" class="">
                    <InputField
                        label={field.thesaurusDatePublication.label}
                        type={field.thesaurusDatePublication.type}
                        value={thesaurusDatePublication}
                        help={field.thesaurusDatePublication.help}
                        error={field.thesaurusDatePublication.error}
                        field={field.thesaurusDatePublication.name}
                        {id}
                        {onSave}
                    />
                </Col>
            </Row>
        </Col>
        <Col md="1" class="mt-5">
            <Button color="dark" outline class="mx-auto py-1 px-2" on:click={onRemove}>
                <Icon name="dash" />
            </Button>
        </Col>
    </Row>
    <hr />
{/if}
