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

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

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

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

    export let field;

    const converter = new XmlConverter();

    // let dateCreation = formatDate();
    // let dateRevision = false;
    // let dates = getValues();
    let error = {
        required: true,
        message: false,
    };

    $: isReady = $storeMdjs;

    $: dates = getValues($storeMdjs);
    $: dateCreation = converter.getValue(dates.creation, "date")[0] || "";
    $: dateRevision = converter.getValue(dates.revision, "date")[0] || "";
    $: error.required = !dateCreation && !dateRevision;

    function getValues(mdjs) {
        var dataDates = mdjs ? converter.getValue(mdjs, field.name, field.space) : [{}];
        var result = {};
        for (var i = 0; i < dataDates.length; i++) {
            var dateType = converter.getValue(dataDates[i], "dateType");
            if (dateType) {
                result[dateType] = dataDates[i];
            }
        }
        return result;
    }

    onMount(() => {
        // dates = getValues();
    });

    function formatDate(date) {
        date = date || Date.now();
        var d = new Date(date);
        var month = (d.getMonth() + 1).toString();
        month = month.length < 2 ? "0" + month : month;
        var day = d.getDate().toString();
        day = day.length < 2 ? "0" + day : day;
        var year = d.getFullYear().toString();
        return [year, month, day].join("-");
    }

    function onSave(fieldName, fieldValue, dateType) {
        dates[dateType] = converter.setValue(dates[dateType], fieldName, [fieldValue]);
        dates[dateType] = converter.setValue(dates[dateType], "dateType", [dateType]);
        var dataDates = [dates.creation, dates.revision, dates.publication];
        $storeMdjs = converter.setValue($storeMdjs, "dataDates", dataDates);
        dates = getValues();
    }

    function onSaveCreation(fieldName, fieldValue) {
        onSave(fieldName, fieldValue, "creation");
    }

    function onSaveRevision(fieldName, fieldValue) {
        onSave(fieldName, fieldValue, "revision");
    }
</script>

{#if isReady}
    <Row>
        <Col md="6">
            <InputField
                label={field.children.dateCreation.label}
                type={field.children.dateCreation.type}
                value={dateCreation}
                help={field.children.dateCreation.help}
                {error}
                field={field.children.dateCreation.name}
                onSave={onSaveCreation}
            />
        </Col>
        <Col md="6">
            <InputField
                label={field.children.dateRevision.label}
                type={field.children.dateRevision.type}
                value={dateRevision}
                help={field.children.dateRevision.help}
                {error}
                field={field.children.dateRevision.name}
                onSave={onSaveRevision}
            />
        </Col>
        <!-- {#if error.required}
            <Col md="12" class="mt-n3">
                <small class="text-danger">{field.error.message}</small>
            </Col>
        {/if} -->
    </Row>
    <Row class="justify-content-md-end">
        <Col>
            {#if $validateForm && error.required && field.error.message}
                <small class="text-danger">{field.error.message}</small>
            {/if}
        </Col>
    </Row>
{/if}

<style>
</style>
