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

    import { Row, Col } from "sveltestrap";

    import DragDrop from "@/components/DragDrop.svelte";

    import { storeMdjs } from "@/stores/mdjs.store";
    import { storeUrlFiles, storeDeletedFiles, storeNewFiles } from "@/stores/files.store";
    import { user } from "@/stores/app.store";
    import { XmlConverter } from "@/libs/xml-converter/xml-converter";

    import InputField from "@/components/md-form/elements/InputField.svelte";
    import Image from "@/components/Image.svelte";

    export let field;
    export let value = [];
    export let id = 0;
    export let onSaveItem = false;

    let fileName = "";
    let fileImage = "";
    let fileDescription = "";
    let fileType = "";

    $: fileName = getValue(value, "fileName");
    $: fileDescription = getValue(value, "fileDescription");
    // TODO: récupérer automatiquement le type de fichier à partir de "file"
    $: fileType = getValue(value, "fileType");
    $: $storeUrlFiles["browsegraphic-" + id] = fileName;

    $: 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 OnDrop(files) {
        if (files[0]) {
            $storeNewFiles["browsegraphic-" + id] = files[0];
            fileName = "file:///" + files[0].name;
            onSave("fileName", fileName);

            var reader = new FileReader();
            reader.onload = function (e) {
                fileImage = e.target.result;
            };
            reader.readAsDataURL(files[0]);
        }
    }

    function onRemoveImage() {
        if (fileImage) {
            fileImage = "";
            $storeDeletedFiles["browsegraphic-" + id] = $storeNewFiles["browsegraphic-" + id].name;
            delete $storeNewFiles["browsegraphic-" + id];
        }
        fileName = "";
        onSave("fileName", "", id);
    }
</script>

{#if isReady}
    <Row>
        <Col md="10">
            {#if $user.editor}
                <DragDrop
                    {OnDrop}
                    autoUpload={false}
                    multiple={true}
                    accept="image/*"
                    text="Déposez une illustration des données (*.jpg ou *.png) - Taille maximale: 1 Mo"
                />
            {/if}
            <InputField
                type={field.fileName.type}
                value={fileName}
                help={field.fileName.help}
                error={field.fileName.error}
                field={field.fileName.name}
                placeholder={field.fileName.placeholder}
                small={true}
                disabled={fileImage}
                editable={field.fileName.editable}
                css="mt-2"
                {id}
                {onSave}
            />
        </Col>
        <Col md="4" class="d-none">
            <InputField
                hidden={true}
                label={field.fileDescription.label}
                type={field.fileDescription.type}
                value={"Logo " + id}
                help={field.fileDescription.help}
                error={field.fileDescription.error}
                field={field.fileDescription.name}
                {id}
                {onSave}
            />
        </Col>
        <Col md="2" class="mx-auto">
            {#if fileImage && $user.editor}
                <Image src={fileImage} alt={"Illustration " + id} {onRemoveImage} displayButton={fileImage} />
            {:else}
                <Image src={fileName} alt={"Illustration " + id} {onRemoveImage} displayButton={fileName} />
            {/if}
        </Col>
    </Row>
{/if}
