<script setup>
import Navigation from "@/Components/custom/Navigation.vue";
import SearchForm from "@/Components/custom/SearchForm.vue";
import UserDropdown from "@/Components/custom/UserDropdown.vue";
import { emitter } from "@/emitter.js";
import { ref, onMounted } from "vue";
import { useForm, usePage } from "@inertiajs/vue3";

// get current page for file uploading
const page = usePage();
// make refs
const dragging = ref(false);

// add Mitt event listener on component load
onMounted(() => {
    emitter.on("FILE_UPLOAD_STARTED", uploadFiles);
});

// file drop function
const onDrop = (event) => {
    dragging.value = false;
    // get dragged files
    const files = event.dataTransfer.files;
    // check if files exist, then upload
    // note that folders can be falsy here
    if (files.length) {
        uploadFiles(files);
    }
};

// create form input for file upload
const fileUpload = useForm({
    files: [],
    parent_id: null,
});

// upload files function
const uploadFiles = (files) => {
    // fill out form
    fileUpload.files = files;
    fileUpload.parent_id = page.props.folder.id;

    // send form to backend for processing
    fileUpload.post(route("file.new"));
};
</script>

<template>
    <div class="h-screen w-full bg-zinc-900 text-gray-100 flex gap-4">
        <Navigation />
        <main
            @drop.prevent="onDrop"
            @dragover.prevent="dragging = true"
            @dragleave.prevent="dragging = false"
            class="flex flex-col flex-1 px-4 overflow-hidden"
        >
            <template v-if="dragging">
                <div
                    class="text-lg w-full h-full flex flex-col items-center justify-center border-2 border-dashed border-gray-700"
                >
                    <div
                        class="w-1/5 h-1/5 border-2 rounded-lg border-gray-700 text-gray-300 text-6xl flex items-center justify-center"
                    >
                        <div class="arrow">+</div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="flex items-center justify-between w-full">
                    <SearchForm />
                    <UserDropdown />
                </div>
                <div class="flex-1 flex flex-col overflow-hidden">
                    <slot />
                </div>
            </template>
        </main>
    </div>
</template>
