<template>
    <div class="flex flex-1 overflow-x-hidden h-svh">
        <USidebar v-model:open="open" collapsible="icon" rail :ui="{
            container: 'h-full z-80',
            inner: 'bg-elevated/25 divide-transparent',
            body: 'py-0'
        }">
            <template #header>
                <UDropdownMenu :items="teamsItems" :content="{ align: 'start', collisionPadding: 12 }"
                    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
                    <UButton v-bind="selectedTeam" trailing-icon="i-lucide-chevrons-up-down" color="neutral"
                        variant="ghost" square class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
                            trailingIcon: 'text-dimmed ms-auto'
                        }" />
                </UDropdownMenu>
            </template>

            <template #default="{ state }">
                <UNavigationMenu :key="state" :items="menuItems" orientation="vertical"
                    :ui="{ link: 'p-1.5 overflow-hidden' }" />
            </template>

            <template #footer>
                <UDropdownMenu :items="userItems" :content="{ align: 'center', collisionPadding: 12 }"
                    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-48' }">
                    <UButton v-bind="userStore.user" :label="userStore.user?.email"
                        trailing-icon="i-lucide-chevrons-up-down" color="neutral" variant="ghost" square
                        class="w-full data-[state=open]:bg-elevated overflow-hidden" :ui="{
                            trailingIcon: 'text-dimmed ms-auto'
                        }" />
                </UDropdownMenu>
                <!-- first_name: '', last_name: '' -->
            </template>
        </USidebar>

        <div class="flex-1 flex flex-col">
            <div class="flex h-(--ui-header-height) shrink-0 items-center justify-between px-4 border-b border-default">
                <div class="flex items-center gap-2">
                    <UButton icon="i-lucide-panel-left" color="neutral" variant="ghost" aria-label="Toggle sidebar"
                        @click="open = !open" />
                    <p class="font-bold text-xl">Customer-Management: <span class="text-[20px] font-medium">{{ pageTitle
                    }}</span></p>
                </div>
                <div class="hidden md:flex items-center gap-12">
                    <div class="flex items-center gap-2">
                        <CountryCurrencySwitch />
                        <LangSwitch />
                    </div>
                    <div class="flex items-center gap-2">
                        <ThemeSwitch />
                        <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
                            class="flex gap-2 items-center   px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark) whitespace-nowrap">
                            {{ $t('general.logout') }}
                            <UIcon name="ic:baseline-logout" class="text-red-700 dark:text-red-500" />
                        </button>
                    </div>
                </div>
            </div>

            <div class="flex-1 p-4 bg-slate-50 dark:bg-(--main-dark)">
                <slot />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useColorMode } from '@vueuse/core'
import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
import { defineShortcuts, extractShortcuts } from '@nuxt/ui/runtime/composables/defineShortcuts.js'
import { useAuthStore } from '../stores/customer/auth'
import { useRoute } from 'vue-router'

const route = useRoute()
const pageTitle = computed(() => route.meta.name ?? 'Default Page')

const authStore = useAuthStore()
const userStore = useUserStore()

const open = ref(true)
const colorMode = useColorMode()

const teams = ref([
    {
        label: 'Nuxt',
        avatar: {
            src: 'https://github.com/nuxt.png',
            alt: 'Nuxt'
        }
    },
    {
        label: 'Vue',
        avatar: {
            src: 'https://github.com/vuejs.png',
            alt: 'Vue'
        }
    },
    {
        label: 'UnJS',
        avatar: {
            src: 'https://github.com/unjs.png',
            alt: 'UnJS'
        }
    }
])
const selectedTeam = ref(teams.value[0])

const teamsItems = computed<DropdownMenuItem[][]>(() => {
    return [
        teams.value.map((team, index) => ({
            ...team,
            kbds: ['meta', String(index + 1)],
            onSelect() {
                selectedTeam.value = team
            }
        })),
        [
            {
                label: 'Create team',
                icon: 'i-lucide-circle-plus'
            }
        ]
    ]
})

function getItems(state: 'collapsed' | 'expanded') {
    return [
        {
            label: 'Inbox',
            icon: 'i-lucide-inbox',
            badge: '4'
        },
        {
            label: 'Issues',
            icon: 'i-lucide-square-dot'
        },
        {
            label: 'Activity',
            icon: 'i-lucide-square-activity'
        },
        {
            label: 'Settings',
            icon: 'i-lucide-settings',
            defaultOpen: true,
            children:
                state === 'expanded'
                    ? [
                        {
                            label: 'General',
                            icon: 'i-lucide-house'
                        },
                        {
                            label: 'Team',
                            icon: 'i-lucide-users'
                        },
                        {
                            label: 'Billing',
                            icon: 'i-lucide-credit-card'
                        }
                    ]
                    : []
        }
    ] satisfies NavigationMenuItem[]
}

// 
import { useRouter } from 'vue-router'
import { currentLang } from '@/router/langs'
import { useFetchJson } from '@/composable/useFetchJson'
import CountryCurrencySwitch from '@/components/inner/CountryCurrencySwitch.vue'
import LangSwitch from '@/components/inner/LangSwitch.vue'
import ThemeSwitch from '@/components/inner/ThemeSwitch.vue'
import type { LabelTrans, TopMenuItem } from '@/types'
import { useUserStore } from '@/stores/user'
import { watch } from 'vue'

const router = useRouter()

const menu = ref<TopMenuItem[] | null>(null)

const Id = Number(route.params.user_id)
async function cmGetTopMenu() {
    try {
        const { items } = await useFetchJson<TopMenuItem[]>(`/api/v1/restricted/menu/get-top-menu?target_user_id=${Id}`)

        menu.value = items
    } catch (err) {
        console.log(err)
    }
}

watch(
    () => route.params.user_id,
    () => {
        if (route.params.user_id) {
            cmGetTopMenu()
        }
    },
    { immediate: true }
)

const menuItems = computed(() => {
    if (!menu.value?.length) return []

    return transformMenu(
        menu.value || [],
        currentLang.value?.iso_code
    )
})

function transformMenu(
    items: TopMenuItem[],
    locale: string | undefined
): NavigationMenuItem[] {
    return items.map((item) => {
        const route: NavigationMenuItem = {
            icon: item.label.icon || 'i-lucide-house',
            label:
                item.label.trans?.[locale as keyof LabelTrans]?.label ||
                item.label.trans?.en?.label ||
                '—',
            children: item.children
                ? transformMenu(item.children, locale)
                : undefined,
            onSelect: () => {
                router.push({
                    name: item.params.route.name,
                    params: {
                        ...(item.params.route.params || {}),
                        locale: currentLang.value?.iso_code
                    }
                })
            }
        }

        return route
    })
}


const userItems = computed<DropdownMenuItem[][]>(() => [
    [
        {
            label: 'Profile',
            icon: 'i-lucide-user'
        },
        {
            label: 'Billing',
            icon: 'i-lucide-credit-card'
        },
        {
            label: 'Settings',
            icon: 'i-lucide-settings',
            to: '/settings'
        }
    ],
    [
        {
            label: 'Appearance',
            icon: 'i-lucide-sun-moon',
            children: [
                {
                    label: 'Light',
                    icon: 'i-lucide-sun',
                    type: 'checkbox',
                    checked: colorMode.value === 'light',
                    onUpdateChecked(checked: boolean) {
                        if (checked) {
                            colorMode.preference = 'light'
                        }
                    },
                    onSelect(e: Event) {
                        e.preventDefault()
                    }
                },
                {
                    label: 'Dark',
                    icon: 'i-lucide-moon',
                    type: 'checkbox',
                    checked: colorMode.value === 'dark',
                    onUpdateChecked(checked: boolean) {
                        if (checked) {
                            colorMode.preference = 'dark'
                        }
                    },
                    onSelect(e: Event) {
                        e.preventDefault()
                    }
                }
            ]
        }
    ],
    [
        {
            label: 'GitHub',
            icon: 'i-simple-icons-github',
            to: 'https://github.com/nuxt/ui',
            target: '_blank'
        },
        {
            label: 'Log out',
            icon: 'i-lucide-log-out'
        }
    ]
])

defineShortcuts(extractShortcuts(teamsItems.value))
</script>
