<script>
    import { onMount } from "svelte";
    import { querystring, location, pop, replace } from "svelte-spa-router";
    import bsCustomFileInput from "bs-custom-file-input";
    import { Container, Button, ButtonToolbar, Row, Col, FormGroup, Label, Input, FormText } from "sveltestrap";

    import helpers from "@/libs/helpers/index.js";
    import { storeConfig, storeLang, storeLocalesViews, storeModel, storeFile } from "@/stores/config.store";
    import { storeFiles, storeUrlFiles, storeDeletedFiles, storeNewFiles } from "@/stores/files.store";
    import { storeThemeKeywords, storeInspireKeywords } from "@/stores/mdjs.store";

    $: isReady = localesView;

    function initFileComponent() {
        bsCustomFileInput.init();
        const xmlFile = document.querySelector("#selectedFile");
        xmlFile.addEventListener(
            "change",
            function () {
                selectedFile = this.files[0];
            },
            false
        );
    }

    // Test: get selectedFile and log if defined/modified
    // $: {
    //     if (selectedFile) {
    //         console.log(selectedFile.name, selectedFile.type, selectedFile.size);
    //         console.log("Load file...");
    //     }
    // }

    let query;
    // Update URL when query is modified
    // $: {
    //     // replace([$location, query].join("?"));
    //     replace(query ? [$location, query].join("?") : $location);
    // }

    const view = "load";
    $: localesView = $storeLocalesViews[view];
    onMount(() => {
        // query = helpers.checkQueryParams($querystring, { lang: $storeLang });
        // query = helpers.checkQueryParams($querystring);

        const file = $storeConfig.views[view].locales[$storeLang];
        storeLocalesViews.setLocalesView(view, file);
    });

    let selectedModel = $storeConfig.models[0].code;
    let selectedFile;
    let selectedLayer;
    // let selectedUrl = "https://www.datagrandest.fr/geonetwork/srv/api/records/FR-200052264-A0115-0000/formatters/xml";
    let selectedUrl = "";

    function onLoad() {
        // Empty files stores
        $storeFiles = [];
        $storeUrlFiles = [];
        $storeDeletedFiles = [];
        $storeNewFiles = [];
        $storeThemeKeywords = [{}];
        $storeInspireKeywords = [{}];

        if (selectedLayer) {
            var url = $storeConfig.api.geoserver_md + "?layer=" + selectedLayer;
            storeFile.setFile(url, "url");
            cancel();
            return;
        }

        if (selectedUrl) {
            storeFile.setFile(selectedUrl, "url", "xml");
            cancel();
            return;
        }

        if (selectedFile) {
            helpers.readFile(selectedFile, (data) => {
                storeFile.setFile(data, "xml");
                cancel();
            });
            return;
        }

        if (selectedModel) {
            const model = $storeConfig.models.find((model) => model.code == selectedModel);
            storeModel.setModel(model);
            cancel();
            return;
        }
    }

    function cancel() {
        pop();
    }
</script>

{#if isReady}
    <Container class="mt-3">
        <Row class="">
            <Col>
                <h3>Charger une fiche ou un modèle de fiche</h3>
            </Col>
        </Row>
        <Row class="">
            <Col>
                <FormGroup>
                    <Label for="selectedModel">Modèle de fiche</Label>
                    <Input type="select" name="selectedModel" id="selectedModel" bind:value={selectedModel}>
                        {#each $storeConfig.models as model, key}
                            <option value={model.code} selected={key === 0}>
                                {model.name}
                            </option>
                        {/each}
                    </Input>
                    <FormText color="muted">Un modèle permet de préremplir la fiche de métadonnées.</FormText>
                </FormGroup>
            </Col>
        </Row>
        <Row>
            <Col>
                <!-- TODO: voir pour utiliser DragDrop pour charger le fichier - component LoadFile à créer ? -->
                <FormGroup>
                    <Label>Fichier XML</Label>
                    <Input
                        type="file"
                        id="selectedFile"
                        name="selectedFile"
                        lang={$storeLang}
                        label="Choisissez un fichier"
                        accept="text/xml"
                    />
                    <FormText color="muted">
                        Télécharger un fichier XML pour le modifier ou vous en servir comme base de travail (modèle).
                    </FormText>
                    <div use:initFileComponent />
                </FormGroup>
            </Col>
        </Row>
        <Row>
            <Col>
                <FormGroup>
                    <Label for="selectedUrl">Lien vers une fiche XML en ligne</Label>
                    <Input
                        type="text"
                        name="selectedUrl"
                        id="selectedUrl"
                        placeholder="https://..."
                        bind:value={selectedUrl}
                    />
                    <FormText color="muted">Vous pouvez charger un fichier XML à partir d'un URL.</FormText>
                </FormGroup>
            </Col>
        </Row>
        <Row>
            <Col>
                <FormGroup>
                    <Label for="selectedLayer">Couche GeoServer</Label>
                    <Input type="text" name="selectedLayer" id="selectedLayer" bind:value={selectedLayer} />
                    <FormText color="muted">
                        Charger la fiche de métadonnées à partir de la desscription d'une couche de données dans
                        GeoServer.
                    </FormText>
                </FormGroup>
            </Col>
        </Row>
        <Row>
            <Col>
                <ButtonToolbar class="float-end mt-3 gap-1">
                    <Button outline color="dark" on:click={onLoad}>Charger</Button>
                    <Button outline color="dark" on:click={cancel}>Annuler</Button>
                </ButtonToolbar>
            </Col>
        </Row>
    </Container>
{/if}
