<template>
    <div v-if="files">
        <transition
            class="flex flex-wrap items-center flex-1 gap-3"
            enter-active-class="transition duration-200 ease-in-out"
            enter-class="translate-y-1 opacity-0"
            enter-to-class="translate-y-0 opacity-100"
            leave-active-class="transition duration-200 ease-in-out"
            leave-class="translate-y-0 opacity-100"
            leave-to-class="translate-y-1 opacity-0"
            mode="out-in"
        >
            <div
                v-if="files.length < maxFiles"
                :key="`${name}_file_upload`"
                @dragover.prevent="dragOver = true"
                @dragleave.prevent="dragOver = false"
                @drop.prevent="dragOver = false"
            >
                <label
                    :class="dragOver ? 'brightness-95' : ''"
                    :for="name"
                    @drop="dragFile"
                >
                    <slot name="noFiles"></slot>
                </label>
                <input
                    :id="name"
                    ref="file"
                    :accept="accept"
                    :multiple="maxFiles > 1"
                    :name="name"
                    class="hidden"
                    type="file"
                    @change="upload"
                />
                <FormKit
                    v-model="files"
                    :accept="accept"
                    :classes="{
                        inner: 'hidden',
                    }"
                    :multiple="maxFiles > 1"
                    :name="name"
                    :validation="required ? 'required' : ''"
                    type="file"
                />
            </div>
            <div v-else :key="`${name}_file_preview`" class="w-full">
                <div
                    v-for="(file, index) in files"
                    :key="index"
                    :title="file.name || 'attachment ' + index + 1"
                    class="rounded-lg gap-1 min-h-[38px] bg-blue-200 px-[15px] py-1.5 max-w-[250px] overflow-hidden flex items-center justify-center text-gray-300"
                >
                    <button class="" type="button" @click="remove(index)">
                        <svg
                            fill="none"
                            height="17"
                            viewBox="0 0 16 17"
                            width="16"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M12.6668 4.77331L11.7268 3.83331L8.00016 7.55998L4.2735 3.83331L3.3335 4.77331L7.06016 8.49998L3.3335 12.2266L4.2735 13.1666L8.00016 9.43998L11.7268 13.1666L12.6668 12.2266L8.94016 8.49998L12.6668 4.77331Z"
                                fill="#222222"
                            />
                        </svg>
                    </button>
                    <span class="flex-1 line-clamp-1">
                        {{ file.name || "Attachment " + index + 1 }}
                    </span>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    props: {
        maxFiles: { type: Number, default: 1 },
        initSelected: { type: Number, default: 0 },
        mainPhotoSwitch: { type: Boolean, default: true },
        label: { type: String, default: "dragdropLabel" },
        value: { type: Array, default: () => [] },
        name: String,
        avatar: { type: Boolean, default: false },
        accept: { type: String, default: "*" },
        required: { type: Boolean, default: false },
    },
    data() {
        return {
            files: null,
            selected: this.initSelected,
            dragOver: false,
        };
    },
    methods: {
        //Upload by clicking the box
        upload() {
            let fileArray = Array.from(this.$refs.file.files);
            this.files = [...this.files, ...fileArray].slice(0, this.maxFiles);
            this.update();
        },
        //Get blob or url to preview
        getPreviewFromFile(file) {
            return file.url ? file.url : URL.createObjectURL(file);
        },
        //Change the selected main image
        updateSwitch(newVal) {
            if (newVal.checked) this.selected = newVal.value.split("-")[1];
            else this.selected = 0;
            this.update();
        },
        //Upload by dragging and dropping
        dragFile(e) {
            //MIME type
            let fileArray = Array.from(e.dataTransfer.files);
            const acceptedTypes = this.accept;
            fileArray = fileArray.filter(function (el) {
                // return acceptedTypes.includes(el.type);
                // return el.type.match(acceptedTypes) !== null;
                return true;
            });
            this.files = [...this.files, ...fileArray].slice(0, this.maxFiles);
            this.update();
        },
        //After each update set default image and emit to parent component.
        update() {
            this.$emit(
                "update:value",
                this.maxFiles > 1 ? this.files : this.files[0]
            );
        },
        remove(index) {
            this.files.splice(index, 1);
            if (this.files.length <= this.selected) this.selected = 0;
        },
    },
    mounted() {
        this.files = this.value || [];
    },
};
</script>
