<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 value = {};
    export let id = 0;
    export let error;
    export let onRemoveItem = false;
    export let onSaveItem = false;
    export let formats = [];

    let formatName = "";
    let formatVersion = "";
    let formatSpecification = "";

    $: isReady = $storeMdjs;
    $: formatName = getValue(value, "formatName");
    $: formatVersion = getValue(value, "formatVersion");
    $: formatSpecification = getValue(value, "formatSpecification");

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

    const converter = new XmlConverter();

    // function onSave(fieldName, fieldValue, id) {
    //     value = converter.setValue(value, fieldName, [fieldValue]);
    //     onSaveItem(id, value);
    // }

    function onSave(fieldName, fieldValue, id) {
        if (fieldValue && fieldName == "formatName") {
            const format = formats.find((item) => item.value == fieldValue);
            const version = format ? format.version : "Non précisée";
            const specification = format ? format.specification : "Non précisée";
            value = converter.setValue(value, "formatVersion", [version]);
            value = converter.setValue(value, "formatSpecification", [specification]);
        }
        value = converter.setValue(value, fieldName, [fieldValue]);
        onSaveItem(id, value);
    }

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

{#if isReady}
    <Row>
        <Col md="11">
            <InputField
                type={field.formatName.type}
                value={formatName}
                {error}
                field={field.formatName.name}
                {id}
                {onSave}
                list={formats}
            />
        </Col>
        <Col md="1">
            <Button color="dark" outline class="mx-auto py-1 px-2" on:click={onRemove}>
                <Icon name="dash" />
            </Button>
        </Col>
    </Row>
    <Row>
        <Col>
            <Col md="">
                <InputField
                    type={field.formatVersion.type}
                    value={formatVersion}
                    {error}
                    field={field.formatVersion.name}
                    {id}
                    {onSave}
                    hidden={true}
                />
            </Col>
            <Col md="">
                <InputField
                    type={field.formatSpecification.type}
                    value={formatSpecification}
                    {error}
                    field={field.formatSpecification.name}
                    {id}
                    {onSave}
                    hidden={true}
                />
            </Col>
        </Col>
    </Row>
{/if}

<style>
</style>
