<script setup>
import { ref } from "vue";
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
import NewFolderModal from "./NewFolderModal.vue";
import UploadFiles from "./UploadFiles.vue";
import UploadFolder from "./UploadFolder.vue";

const newFolderModalActive = ref(false);

const toggleNewFolderModal = (bool) => {
    newFolderModalActive.value = bool;
};
</script>

<template>
    <Menu as="div" class="relative inline-block text-left">
        <div>
            <MenuButton
                class="inline-flex w-full justify-center rounded-md bg-green-600/80 px-5 py-3 font-medium text-white hover:bg-green-600/40"
            >
                + New&nbsp;
            </MenuButton>
        </div>

        <transition
            enter-active-class="transition duration-100 ease-out"
            enter-from-class="transform scale-95 opacity-0"
            enter-to-class="transform scale-100 opacity-100"
            leave-active-class="transition duration-75 ease-in"
            leave-from-class="transform scale-100 opacity-100"
            leave-to-class="transform scale-95 opacity-0"
        >
            <MenuItems
                class="border border-gray-300 dark:border-gray-700 absolute left-0 mt-2 w-56 divide-y divide-gray-700 rounded-md bg-zinc-900 focus:outline-none"
            >
                <div class="px-1 py-1">
                    <MenuItem v-slot="{ active }"
                        ><a
                            href="#"
                            @click.prevent="toggleNewFolderModal(true)"
                            class="block w-full items-center rounded-md py-2 border border-zinc-900 block w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-600 dark:text-zinc-100 hover:border-sky-500 dark:hover:border-sky-600 hover:ring-sky-500 dark:hover:ring-sky-600transition duration-150 ease-in-out"
                            >New Folder</a
                        ></MenuItem
                    >
                </div>
                <div class="px-1 py-1">
                    <UploadFiles />
                    <UploadFolder />
                </div>
            </MenuItems>
        </transition>
    </Menu>
    <NewFolderModal
        v-model="newFolderModalActive"
        @close="toggleNewFolderModal(false)"
    />
</template>
