<script lang="ts" setup>
import { Head, usePage } from '@inertiajs/vue3';
import { mdiAccountKey, mdiSquareEditOutline, mdiAlertBoxOutline, mdiPlus, mdiTrashCan, mdiCheckCircle, mdiCloseCircle } from '@mdi/js';
import { computed, ComputedRef } from 'vue';
import type { PropType } from "vue";
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import BaseButton from '@/Components/BaseButton.vue';
import CardBox from '@/Components/CardBox.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import NotificationBar from '@/Components/NotificationBar.vue';
import { stardust } from '@eidellev/adonis-stardust/client';

interface MimeType {
    id: number;
    name: string;
    file_extension: string;
    alternate_mimetype: string;
    enabled: boolean;
}

defineProps({
    mimetypes: {
        type: Array as PropType<MimeType[]>,
        default: () => ({}),
    },
    can: {
        type: Object,
        default: () => ({}),
    },
});

const flash: ComputedRef<any> = computed(() => {
    return usePage().props.flash;
});
</script>

<template>
    <LayoutAuthenticated>
        <Head title="Mime Types" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccountKey" title="Mime Types" main>
                <BaseButton
                    v-if="can.create"
                    :route-name="stardust.route('settings.mimetype.create')"
                    :icon="mdiPlus"
                    label="Add"
                    color="info"
                    rounded-full
                    small
                />
            </SectionTitleLineWithButton>
            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                {{ flash.message }}
            </NotificationBar>
            <CardBox class="mb-6" has-table>
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                            <th class="px-4 py-2 text-left text-sm font-medium uppercase tracking-wider">Mimetype</th>
                            <th class="px-4 py-2 text-left text-sm font-medium uppercase tracking-wider">Alternate Mime Types</th>
                            <th v-if="can.edit" class="px-4 py-2 text-left text-sm font-medium uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <tr v-for="mimetype in mimetypes" :key="mimetype.id">
                            <td class="px-4 py-2 whitespace-nowrap text-left text-sm" data-label="Name">
                                <span class="flex items-center">                                
                                    <svg viewBox="0 0 24 24" v-if="mimetype.enabled" :class="{'text-green-500': mimetype.enabled}" class="w-4 h-4 mr-2">
                                        <path fill="currentColor" :d="mdiCheckCircle" />
                                    </svg>
                                    <svg v-else viewBox="0 0 24 24" :class="{'text-red-500': !mimetype.enabled}" class="w-4 h-4 mr-2">
                                        <path fill="currentColor" :d="mdiCloseCircle" />
                                    </svg>
                                                                      <br>
                                    <span class="truncate block max-w-xs">{{ mimetype.name }}</span>
                                </span>
                                <ul class="list-none pl-0">
                                    <li v-for="ext in mimetype.file_extension?.split('|')" :key="ext"  class="flex items-center truncate block max-w-xs">- .{{ ext }}</li>
                                </ul>
                            </td>
                            <td class="px-4 py-2 whitespace-nowrap text-left text-sm" data-label="Alternate Mime Types">
                                 <ul  class="list-none pl-0">
                                    <li v-for="alt in mimetype.alternate_mimetype?.split('|')" :key="alt" class="flex items-center truncate block max-w-xs">- {{ alt }}</li>
                                </ul>
                            </td>
                            <!-- <td class="px-4 py-2 whitespace-nowrap" data-label="Status">
                                <template v-if="mimetype.enabled">Active</template>
                                <template v-else>Inactive</template>
                            </td> -->
                            <td v-if="can.edit" class="before:hidden lg:w-1 whitespace-nowrap px-4 py-2 whitespace-nowrap text-left text-sm">
                                <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                    <BaseButton v-if="mimetype.enabled"
                                        :route-name="stardust.route('settings.mimetype.down', [mimetype.id])"
                                        color="warning" :icon="mdiSquareEditOutline" label="disable" small />
                                    <BaseButton v-else
                                        :route-name="stardust.route('settings.mimetype.up', [mimetype.id])"
                                        color="success" :icon="mdiSquareEditOutline" label="enable" small />
                                    <BaseButton v-if="can.edit" color="danger"
                                        :route-name="stardust.route('settings.mimetype.delete', [mimetype.id])" :icon="mdiTrashCan"
                                        small />
                                </BaseButtons>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </CardBox>
        </SectionMain>
    </LayoutAuthenticated>
</template>
