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

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

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

    export let field;

    let displayHelp = false;
    let scaleDenominator = "";
    let scaleDistance = "";
    let error = {
        required: true,
        message: false,
    };

    $: isReady = $storeMdjs;
    $: scaleDenominator = getValue($storeMdjs, field.children.dataScaleDenominator.name);
    $: scaleDistance = getValue($storeMdjs, field.children.dataScaleDistance.name);
    $: error.required = !scaleDenominator && !scaleDistance;

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

    const converter = new XmlConverter();

    function onSave(fieldName, fieldValue, id) {
        $storeMdjs = converter.setValue($storeMdjs, fieldName, [fieldValue]);
    }
</script>

{#if isReady}
    <Row>
        <Col>
            <strong class="mb-3">{field.label}</strong>
            <!-- If help -->
            {#if field.help}
                <span
                    class="link"
                    on:click={() => {
                        displayHelp = !displayHelp;
                    }}
                >
                    <Icon name="info-circle-fill" class="ms-1 mb-1" />
                </span>
            {/if}
            <!-- If display help -->
            {#if displayHelp}
                <FormText color="muted" class="d-block">
                    {@html helpers.nl2br(field.help)}
                </FormText>
            {/if}
        </Col>
    </Row>

    <Row class="mt-2">
        <Col md="6">
            <InputField
                label={field.children.dataScaleDenominator.label}
                type={field.children.dataScaleDenominator.type}
                value={scaleDenominator}
                help={field.children.dataScaleDenominator.help}
                {error}
                field={field.children.dataScaleDenominator.name}
                {onSave}
            />
        </Col>
        <Col md="6">
            <InputField
                label={field.children.dataScaleDistance.label}
                type={field.children.dataScaleDistance.type}
                value={scaleDistance}
                help={field.children.dataScaleDistance.help}
                {error}
                field={field.children.dataScaleDistance.name}
                {onSave}
            />
        </Col>
        <!-- {#if error.required} -->
        {#if $validateForm && error.required && field.error.message}
            <Col md="12" class="mt-n3">
                <!-- <small class="text-danger">{field.error.message}</small> -->
                <small class="text-danger">{field.error.message}</small>
            </Col>
        {/if}
    </Row>
{/if}
