<template>
    <div class="hy-dropzone">
        <div id="dropzone" :class="{ dragover: isDraggingOverDropzone }" ref="dropzone">
            <p>{{ placeholder }}</p>
        </div>

        <input
            type="file"
            id="nativeUpload"
            ref="nativeUpload"
            :accept="accept"
            @change="readFileContent"
            @dragenter="isDraggingOverDropzone = true"
            @dragleave="isDraggingOverDropzone = false"
            @drop="isDraggingOverDropzone = false"
        />
    </div>
</template>

<script>
export default {
    name: "HyDropzone",
    props: {
        placeholder: {
            type: String,
            default: "Drop file here or click to select a file",
        },
        readMode: {
            type: String,
            default: "text",
        },
        accept: {
            type: String,
            default: "*",
        },
    },
    data() {
        return {
            isDraggingOverDropzone: false,
        };
    },
    methods: {
        readFileContent(inputEvent) {
            inputEvent.preventDefault();
            inputEvent.stopPropagation();

            let fileMeta = inputEvent.target.files[0];

            let reader = new FileReader();

            reader.addEventListener("load", (loadEvent) => {
                // Done reading => start parsing file content
                let fileContent = loadEvent.target.result;

                let file = {
                    content: fileContent,
                    name: fileMeta.name,
                    size: fileMeta.size,
                    lastModified: fileMeta.lastModified,
                    type: fileMeta.type,
                };

                this.$emit("newValue", file);
            });

            // Start reading the file
            if (this.readMode == "text") {
                reader.readAsText(fileMeta);
            } else if (this.readMode == "binaryString") {
                reader.readAsBinaryString(fileMeta);
            } else if (this.readMode == "dataURL") {
                reader.readAsDataURL(fileMeta);
            } else if (this.readMode == "arrayBuffer") {
                reader.readAsArrayBuffer(fileMeta);
            } else {
                throw new Error("HyperUI: HyDropzone expects readMode to be 'text', 'binaryString', 'dataURL' or 'arrayBuffer'.");
            }
        },
        clear() {
            this.$refs.nativeUpload.value = "";

            this.$emit("newValue", null);
        },
    },
};
</script>

<style lang="scss">
.hy-dropzone {
    margin: var(--hy-element-margin);
    height: 300px; // Todo
    position: relative;

    #dropzone {
        height: 100%;
        width: 100%;
        border: 2px dashed var(--hy-element-border-secondary-color);
        border-radius: var(--hy-element-border-radius);
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        box-sizing: border-box;
        pointer-events: none;
        display: grid;
        place-items: center;
        transition: var(--hy-element-transition);
        transition-property: border-color, color;

        &.dragover {
            border-color: var(--hy-accent-color);
            color: var(--hy-accent-color);
        }

        p {
            text-align: center;
            color: var(--hy-font-color-contrast);
            opacity: 0.4;
        }
    }

    #nativeUpload {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
}
</style>
