<script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3'
import AppSidebar from '@/components/AppSidebar.vue';
import { onMounted } from 'vue';
import 'vue-sonner/style.css'
import { Toaster } from 'vue-sonner'
import { Info, CircleAlert, CircleCheck, LoaderCircle, Ban } from "lucide-vue-next"
import { Button } from '@/components/ui/crm-button'
import { SidebarProvider } from '@/components/ui/sidebar';
import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'
import { alertStore } from '@/stores/alertStore';
import axios from 'axios';

const alert = alertStore()
const props = defineProps<{
    title: string
}>();
const isOpen = usePage().props.sidebarOpen;
const cron = usePage().props.cron


onMounted(() => {
    if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
        document.body.classList.add('is-mac')
    }

    if (cron) {
        triggerWebcron()
        setInterval(triggerWebcron, 30000)
    }
})

const triggerWebcron = async function () {
    await axios.get('/webcron')
        .catch(function (response) {
            if (response.status >= 400) {
                console.error(response.message)
            }
        })
}

</script>

<template>

    <Head :title="props.title" />

    <Toaster position="top-right" :expand="true" closeButton :visible-toasts="6" :offset="'1rem'" :toastOptions="{
        unstyled: true,
        classes: {
            toast: 'bg-muted rounded-lg w-80 text-sm shadow-lg/20 p-3 pl-5 flex gap-3',
            title: '',
            description: '',
            actionButton: 'bg-background hover:bg-accent border-1 rounded shadow text-foreground px-2 h-8 ml-auto whitespace-nowrap',
            cancelButton: '',
            closeButton: 'bg-background hover:bg-accent text-foreground stroke-2 rounded-full w-5 h-5 absolute -left-2 -top-2 flex justify-center items-center shadow-md',
            info: 'text-blue-500 dark:text-blue-400',
            error: 'text-white bg-red-500 dark:bg-red-800',
            success: 'text-green-600 dark:text-green-500',
            warning: 'text-white bg-amber-500! dark:bg-amber-600!',
        }
    }">
        <template #loading-icon>
            <div class="animate-spin">
                <LoaderCircle />
            </div>
        </template>
        <template #success-icon>
            <CircleCheck />
        </template>
        <template #error-icon>
            <Ban />
        </template>
        <template #info-icon>
            <Info />
        </template>
        <template #warning-icon>
            <CircleAlert />
        </template>
    </Toaster>

    <div class="overflow-x-auto p-4 lg:p-8 lg:pl-4 print:bg-transparent print:p-0 print:m-0">

        <SidebarProvider :default-open="isOpen">
            <AppSidebar />

            <main class="w-full overflow-x-hidden">
                <slot />
            </main>
        </SidebarProvider>

    </div>

    <AlertDialog v-model:open="alert.open">
        <AlertDialogContent>
            <AlertDialogHeader>
                <AlertDialogTitle class="text-md">{{ alert.title }}</AlertDialogTitle>
                <AlertDialogDescription v-if="alert.message">{{ alert.message }}</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <Button @click="alert.cancel">{{ alert.cancelText }}</Button>
                <Button :variant="alert.actionVariant" @click="alert.action">{{ alert.actionText }}</Button>
            </AlertDialogFooter>
        </AlertDialogContent>
    </AlertDialog>

</template>

<style>
@media print {

    header,
    [data-slot="sidebar"] {
        display: none;
    }

    body {
        margin: 25mm;
    }

    html,
    body,
    [data-slot-sidebar-wrapper] {
        background-color: transparent;
    }

    main {
        margin: 0;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
        outline: none;
    }
}
</style>