<script>
    export let CardClass = "";
    CardClass = ["card", CardClass].join(" ");
    export let BodyClass = "";
    BodyClass = ["card-body text-center", BodyClass].join(" ");

    export let OnClick = false;
    export let OnDragEnter = false;
    export let OnDragLeave = false;
    export let OnDragOver = false;
    export let OnDrop = false;
    export let accept = "*";
    // export let size = 1024 * 1024 * 1024;
    export let multiple = true;
    export let text = "Drag & Drop images or click to upload";
    export let autoUpload = false;

    let dropRegion;
    let inputFiles;
    let filesForm = [];
    let imgSrc = "";

    function onClick() {
        inputFiles.click();
        if (OnClick) {
            OnClick();
        }
    }
    function onDragEnter(e) {
        preventDefault(e);
        if (OnDragEnter) {
            OnDragEnter();
        }
    }
    function onDragLeave(e) {
        preventDefault(e);
        if (OnDragLeave) {
            OnDragLeave();
        }
    }
    function onDragOver(e) {
        preventDefault(e);
        if (OnDragOver) {
            OnDragOver();
        }
    }
    function onDrop(e) {
        preventDefault(e);
        filesForm = e.dataTransfer.files;
        loadFiles();
    }

    function loadFiles() {
        if (autoUpload) {
            uploadFile(filesForm).then(() => {
                if (OnDrop) {
                    OnDrop(filesForm);
                }
            });
        } else {
            if (OnDrop) {
                OnDrop(filesForm);
            }
        }
    }

    function onChangeInputFiles() {
        filesForm = inputFiles.files;
        loadFiles();
    }

    function onClickInputFiles() {
        // Remove inputFiles.value if you want to load the same file twice
        inputFiles.value = null;
    }

    function preventDefault(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    const uploadFile = (files) => {
        var reader = new FileReader();
        reader.onload = function (e) {
            imgSrc = e.target.result;
        };
        reader.readAsDataURL(image);

        const formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            formData.append("files[]", file);
        }

        // send `POST` request
        return fetch("http://localhost:4000/index.php", {
            method: "POST",
            body: formData,
        })
            .then((res) => res.json())
            .then((json) => console.log(json))
            .catch((err) => console.error(err));
    };
</script>

<input
    type="file"
    name="inputFile"
    bind:this={inputFiles}
    {multiple}
    class="d-none"
    {accept}
    on:change={onChangeInputFiles}
    on:click={onClickInputFiles}
/>

<div
    class={CardClass}
    id="drop-region"
    bind:this={dropRegion}
    on:click={onClick}
    on:dragenter={onDragEnter}
    on:dragleave={onDragLeave}
    on:dragover={onDragOver}
    on:drop={onDrop}
>
    <div class={BodyClass}><em>{text}</em></div>
</div>

{#if imgSrc}
    <img src={imgSrc} alt="" />
{/if}
