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

    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 = {
        extentName: "",
        temporalExtentBegin: "",
        temporalExtentEnd: "",
    };
    export let id = 0;
    export let onRemoveItem = false;
    export let onSaveItem = false;

    $: isReady = $storeMdjs;

    const converter = new XmlConverter();

    onMount(() => {});

    function onSave(fieldName, fieldValue, space) {
        space = space || "md";
        value[fieldName] = fieldValue;
        onSaveItem(id, value);
    }

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

{#if isReady}
    <Row>
        <Col md="5">
            <InputField
                type={field.extentName.type}
                value={value.extentName}
                error={field.extentName.error}
                field={field.extentName.name}
                {onSave}
            />
        </Col>
        <Col md="3">
            <InputField
                type={field.temporalExtentBegin.type}
                value={value.temporalExtentBegin}
                error={field.temporalExtentBegin.error}
                field={field.temporalExtentBegin.name}
                {onSave}
            />
        </Col>
        <Col md="3">
            <InputField
                type={field.temporalExtentEnd.type}
                value={value.temporalExtentEnd}
                error={field.temporalExtentEnd.error}
                field={field.temporalExtentEnd.name}
                {onSave}
            />
        </Col>
        <Col md="1">
            <Button color="dark" outline class="mx-auto py-1 px-2" on:click={onRemove}>
                <Icon name="dash" />
            </Button>
        </Col>
    </Row>
{/if}

<style>
</style>
