<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { router, Link } from "@inertiajs/vue3";
import { HomeIcon } from "@heroicons/vue/24/outline";

const { files, folder } = defineProps({
    files: Object,
    folder: Object,
    ancestors: Array,
});

const openFolder = (file) => {
    if (!file.is_folder) return;
    router.visit(
        route("userFiles", {
            folder: file.path,
        })
    );
};
</script>

<template>
    <AuthenticatedLayout>
        <nav class="flex items-center justify-between mb-2">
            <ol class="inline-flex items-center">
                <Link
                    class="border-gray-700 border px-3 py-2 rounded hover:border-sky-600"
                    :href="route('userFiles')"
                >
                    <HomeIcon class="h-5 w-5" aria-hidden="true" />
                </Link>
                <li
                    v-for="(ancestor, index) of ancestors.data"
                    :key="ancestor.id"
                    class="inline-flex items-center"
                >
                    <div class="flex items-center" v-if="ancestor.parent_id">
                        <div class="mx-2">&#x27A4;</div>
                        <Link
                            v-if="index == ancestors.data.length - 1"
                            class="border-sky-600 border px-3 py-2 rounded bg-sky-600"
                            :href="
                                route('userFiles', { folder: ancestor.path })
                            "
                        >
                            {{ ancestor.name }}
                        </Link>
                        <Link
                            v-else
                            class="border-gray-700 border px-3 py-2 rounded hover:border-sky-600"
                            :href="
                                route('userFiles', { folder: ancestor.path })
                            "
                        >
                            {{ ancestor.name }}
                        </Link>
                    </div>
                </li>
            </ol>
        </nav>
        <table v-if="files.data.length" class="w-full border-separate">
            <colgroup>
                <col />
                <col />
                <col />
                <col />
            </colgroup>
            <thead>
                <tr>
                    <th class="p-3 rounded bg-zinc-600 rounded font-medium">
                        Name
                    </th>
                    <th class="p-3 rounded bg-zinc-600 rounded font-medium">
                        Modified
                    </th>
                    <th class="p-3 rounded bg-zinc-600 rounded font-medium">
                        Owner
                    </th>
                    <th class="p-3 rounded bg-zinc-600 rounded font-medium">
                        Size
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr
                    v-for="file of files.data"
                    :key="file.id"
                    @click="openFolder(file)"
                >
                    <td
                        class="p-3 text-center whitespace-nowrap border-gray-700 border rounded hover:border-sky-600 hover:ring-sky-600"
                    >
                        {{ file.name }}
                    </td>
                    <td
                        class="p-3 text-center whitespace-nowrap border-gray-700 border rounded hover:border-sky-600 hover:ring-sky-600"
                    >
                        {{ file.updated_at }}
                    </td>
                    <td
                        class="p-3 text-center whitespace-nowrap border-gray-700 border rounded hover:border-sky-600 hover:ring-sky-600"
                    >
                        {{ file.owner /* get name */ }}
                    </td>
                    <td
                        class="p-3 text-center whitespace-nowrap border-gray-700 border rounded hover:border-sky-600 hover:ring-sky-600"
                    >
                        {{ file.size == null ? 0 : file.size }}
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="h-full" v-else>
            <div class="text-lg mt-1.5">
                <span class="arrow">&#x1F844;</span>&nbsp;&nbsp;&nbsp;click here
                to upload your file
            </div>
            <div class="flex items-center justify-center h-full text-3xl">
                This folder is empty
            </div>
        </div>
    </AuthenticatedLayout>
</template>
