<script setup>
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
import { mdiAccountKey, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
import { computed, ref } 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 Pagination from '@/Components/Admin/Pagination.vue';
import Sort from '@/Components/Admin/Sort.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
import CardBoxModal from '@/Components/CardBoxModal.vue';

const isModalDangerActive = ref(false);
const deleteId = ref();

const props = defineProps({
    roles: {
        type: Object,
        default: () => ({}),
    },
    filters: {
        type: Object,
        default: () => ({}),
    },
    can: {
        type: Object,
        default: () => ({}),
    },
});

const flash = computed(() => {
    // let test = usePage();
    // console.log(test);
    return usePage().props.flash;
});

const form = useForm({
    search: props.filters.search,
});

const formDelete = useForm({});

// function destroy(id) {
// const destroy = async (id) => {
// 	if (confirm('Are you sure you want to delete?')) {
// 		await formDelete.delete(stardust.route('role.destroy', [id]));
// 	}
// };

const destroy = (id, e) => {
    // console.log(id);
    deleteId.value = id;
    isModalDangerActive.value = true;
};

const onConfirm = async (id) => {
    // let id = 6;
    await formDelete.delete(stardust.route('role.destroy', [id]));
    deleteId.value = null;
};

const onCancel = (id) => {
    // console.log('cancel');
    deleteId.value = null;
};
</script>

<template>
    <CardBoxModal
        v-model="isModalDangerActive"
        :delete-id="deleteId"
        large-title="Please confirm"
        button="danger"
        button-label="Delete"
        has-cancel
        v-on:confirm="onConfirm"
        v-on:cancel="onCancel"
    >
        <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
        <p>This is sample modal</p>
    </CardBoxModal>

    <LayoutAuthenticated>
        <Head title="Roles" />
        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiAccountKey" title="Roles" main>
                <BaseButton
                    v-if="can.create"
                    :route-name="stardust.route('role.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>
                <!-- <form @submit.prevent="form.get(stardust.route('role.index'))">
					<div class="py-2 flex">
						<div class="flex pl-4">
							<input
								type="search"
								v-model="form.search"
								class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
								placeholder="Search"
							/>
							<BaseButton
								label="Search"
								type="submit"
								color="info"
								class="ml-4 inline-flex items-center px-4 py-2"
							/>
						</div>
					</div>
				</form> -->
            </CardBox>
            <CardBox class="mb-6" has-table>
                <table>
                    <thead>
                        <tr>
                            <th>
                                <Sort label="Name" attribute="name" />
                            </th>
                            <th>
                                <Sort label="Description" attribute="description" />
                            </th>
                            <th v-if="can.edit || can.delete">Actions</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="role in roles" :key="role.id">
                            <td data-label="Name">
                                <Link
                                    :href="stardust.route('role.show', [role.id])"
                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
                                >
                                    {{ role.name }}
                                </Link>
                            </td>
                            <td data-label="Description">
                                {{ role.description }}
                            </td>
                            <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
                                <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                    <BaseButton
                                        v-if="can.edit"
                                        :route-name="stardust.route('role.edit', [role.id])"
                                        color="info"
                                        :icon="mdiSquareEditOutline"
                                        small
                                    />
                                    <BaseButton
                                        v-if="can.delete"
                                        color="danger"
                                        :icon="mdiTrashCan"
                                        small
                                        @click="($event) => destroy(role.id, $event)"
                                    />
                                    <!-- <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="isModalDangerActive = true" /> -->
                                </BaseButtons>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- <div class="py-4">
					<Pagination v-bind:data="roles.meta" />
				</div> -->
            </CardBox>
        </SectionMain>
    </LayoutAuthenticated>
</template>
