<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 formats = false;
    // export let size = false;
    export let autoUpload = false;

    let dropRegion;
    let inputFiles;
    let filesList = [];
    let filesForm = [];

    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;
        filesList = getFileList(filesForm);
        if (autoUpload) {
            uploadFile(filesForm).then(() => {
                if (OnDrop) {
                    OnDrop(filesForm, filesList);
                }
            });
        } else {
            if (OnDrop) {
                OnDrop(filesForm, filesList);
            }
        }
    }

    function onChangeInputFiles() {
        filesForm = inputFiles.files;
        filesList = getFileList(filesForm);
        uploadFile(filesForm).then(() => {
            if (OnDrop) {
                OnDrop(filesForm, filesList);
            }
        });
    }

    const sendFiles = () => {
        uploadFile(filesForm);
    };

    function getFileList(files) {
        var result = [];
        for (var f = 0; f < files.length; f++) {
            result.push({
                name: files[f].name,
                lastModified: files[f].lastModified,
                size: files[f].size,
                type: files[f].type,
            });
        }
        return result;
    }

    function preventDefault(e) {
        // console.log(123);
        e.preventDefault();
        e.stopPropagation();
    }

    const uploadFile = (files) => {
        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));
    };

    function handleDrop(e) {
        preventDefault(e);
        filesForm = e.dataTransfer.files;
        filesList = getFileList(filesForm);
        uploadFile(filesForm);
    }

    function validateImage(image) {
        // check the type
        var validTypes = ["image/jpeg", "image/png", "image/gif"];
        if (validTypes.indexOf(image.type) === -1) {
            alert("Invalid File Type");
            return false;
        }

        // check the size
        var maxSizeInBytes = 10e6; // 10MB
        if (image.size > maxSizeInBytes) {
            alert("File too large");
            return false;
        }

        return true;
    }
</script>

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

<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>Drag & Drop images or click to upload</em></div>
</div>
