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

    import { Row, Col, Button, Icon, Alert } from "sveltestrap";

    import { storeMdjs } from "@/stores/mdjs.store";
    import { storeUrlFiles } from "@/stores/files.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 listProtocols = [];
    export let onRemoveItem = false;
    export let onSaveItem = false;
    export let error = false;

    let displayLayerName = false;
    let linkageName = "";
    let linkageUrl = "";
    let linkageDescription = "";
    let linkageProtocol = "";

    $: linkageName = getValue(value, "linkageName");
    $: linkageDescription = getValue(value, "linkageDescription");
    $: linkageUrl = getValue(value, "linkageUrl");
    $: linkageProtocol = getValue(value, "linkageProtocol");
    $: displayLayerName =
        linkageProtocol.toLowerCase().includes("wms") || linkageProtocol.toLowerCase().includes("wfs");
    $: $storeUrlFiles["linkage-" + id] = linkageUrl;

    $: isReady = $storeMdjs;

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

    const converter = new XmlConverter();

    onMount(() => {});

    function onSave(fieldName, fieldValue, id) {
        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="7">
            <InputField
                label={field.linkageUrl.label}
                type={field.linkageUrl.type}
                value={linkageUrl}
                error={field.linkageUrl.error}
                field={field.linkageUrl.name}
                {id}
                {onSave}
            />
        </Col>
        <Col md="4" class="mx-auto">
            <InputField
                label={field.linkageProtocol.label}
                type={field.linkageProtocol.type}
                value={linkageProtocol}
                error={field.linkageProtocol.error}
                field={field.linkageProtocol.name}
                list={listProtocols}
                {id}
                {onSave}
            />
        </Col>
        <Col md="1" class="">
            <Button color="dark" outline class="mx-auto py-1 px-2" on:click={onRemove}>
                <Icon name="dash" />
            </Button>
        </Col>

        <Col md="7">
            <InputField
                label={field.linkageDescription.label}
                type={field.linkageDescription.type}
                value={linkageDescription}
                error={field.linkageDescription.error}
                field={field.linkageDescription.name}
                rows={2}
                {id}
                {onSave}
            />
        </Col>
        <Col md="4">
            {#if displayLayerName}
                <InputField
                    label={field.linkageLayer.label}
                    type={field.linkageLayer.type}
                    value={linkageName}
                    error={field.linkageLayer.error}
                    field={field.linkageLayer.name}
                    {id}
                    {onSave}
                />
            {:else}
                <InputField
                    label={field.linkageName.label}
                    type={field.linkageName.type}
                    value={linkageName}
                    error={field.linkageName.error}
                    field={field.linkageName.name}
                    {id}
                    {onSave}
                />
            {/if}
        </Col>
        <Col md="1" />
    </Row>
    {#if error}
        <Row>
            <Col>
                <Alert color="danger">
                    Erreur lors du chargement du fichier. Merci de vérifier si la taille ou le format est correct.
                </Alert>
            </Col>
        </Row>
    {/if}
    <!-- <hr /> -->
{/if}
