<template>
    <Toolbar>
        <template #start>
            <h1 class="text-2xl font-bold">{{ $t('asanMarketAdmin') }}</h1>
        </template>
        <template #end>
            <Button :label="$t('logout')" outlined severity="danger" icon="pi pi-sign-out rotate-180" iconPos="right"
                @click="logout()" />
        </template>
    </Toolbar>

    
    <main class="container flex gap-8">
        <PanelMenu :model="items" class="w-72 shrink-0" />
        <RouterView class="grow" />
    </main>
</template>

<script setup>
import { getActivePinia } from 'pinia';
import { inject, ref } from 'vue';
import { useRouter } from 'vue-router';

const { t, confirm } = inject('service')
const router = useRouter()

const items = ref([
    {
        label: t('pages'),
        icon: 'pi pi-sitemap',
        items: [
            {
                label: t('header'),
                icon: 'pi pi-desktop',
                command: () => router.push('/pages/main')
            },
            {
                label: t('aboutUs'),
                icon: 'pi pi-exclamation-circle',
                command: () => router.push('/pages/about-us')
            },
            {
                label: t('سوالات متداول'),
                icon: 'pi pi-question-circle',
                command: () => router.push('/pages/Faq')
            },
        ]
    },
    {
        label: t('courses'),
        icon: 'pi pi-video',
        items: [
            {
                label: t('allCourses'),
                icon: 'pi pi-angle-double-down',
                command: () => router.push('/courses')
            },
            {
                label: t('createCourse'),
                icon: 'pi pi-file-plus',
                command: () => router.push('/create')
            },
            {
                label: t('مدیریت ویدیو ها'),
                icon: 'pi pi-video',
                command: () => router.push('/videos')
            },

        ]
    },
    {
        label: t('coupons'),
        icon: 'pi pi-barcode',
        items: [
            {
                label: t('همه ی تخفیف ها'),
                icon: 'pi pi-angle-double-down',
                command: () => router.push('/Coupons')
            },
            {
                label: t('ایجاد تخفیف جدید'),
                icon: 'pi pi-plus-circle',
                command: () => router.push('/createCoupon')
            },
            {
                label: t('تاریخچه ی تخفیف ها'),
                icon: 'pi pi-history',
                command: () => router.push('/couponsHistory')
            },
            
        ],
    },
    {
        label: t('categories'),
        icon: 'pi pi-th-large',
        command: () => router.push('/categories')
    },
    {
        label: t('admins'),
        icon: 'pi pi-sitemap',
        command: () => router.push('/admins')
    },
    {
        label: t('users'),
        icon: 'pi pi-users',
        command: () => router.push('/users')
    },
    {
        label: t('تیکت ها'),
        icon: 'pi pi-envelope',
        command: () => router.push('/tickets')
    },
    {
        label: t('comments'),
        icon: 'pi pi-sitemap',
        command: () => router.push('/comments')
    },

]);

const logout = () => {
    confirm.require({
        message: t('Are you sure you want to proceed?'),
        header: t('Danger Zone'),
        icon: 'pi pi-info-circle',
        acceptClass: 'p-button-danger p-button-sm',
        rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
        rejectLabel: t('cancel'),
        acceptLabel: t('forceLogout'),
        defaultFocus: 'reject',
        accept: () => {
            getActivePinia()._s.forEach(store => store.$reset());
            localStorage.removeItem('state')
            router.replace({ name: "Login" })
        }
    });
}

</script>

<style lang="scss" scoped></style>
