<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import {
    BookOpen,
    Building2,
    FileSpreadsheet,
    FolderGit2,
    LayoutGrid,
} from 'lucide-vue-next';
import { computed } from 'vue';
import AppLogo from '@/components/AppLogo.vue';
import NavFooter from '@/components/NavFooter.vue';
import NavMain from '@/components/NavMain.vue';
import NavUser from '@/components/NavUser.vue';
import TeamSwitcher from '@/components/TeamSwitcher.vue';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { index as departmentsIndex } from '@/routes/references/departments';
import { dashboard } from '@/routes';
import type { NavItem } from '@/types';
import { index as analysisIndex } from '@/routes/reports/analysis';
import { index as medicationExpensesIndex } from '@/routes/reports/medication-expenses';
import { index as operationsIndex } from '@/routes/reports/operations';
import { index as periodsIndex } from '@/routes/reports/periods';

const page = usePage();

const dashboardUrl = computed(() =>
    page.props.currentTeam ? dashboard(page.props.currentTeam.slug).url : '/',
);

const mainNavItems = computed<NavItem[]>(() => [
    {
        title: 'Dashboard',
        href: dashboardUrl.value,
        icon: LayoutGrid,
    },
    {
        title: 'Справочники',
        href: page.props.currentTeam
            ? departmentsIndex(page.props.currentTeam.slug).url
            : '/',
        icon: Building2,
        items: page.props.currentTeam
            ? [
                  {
                      title: 'Отделения',
                      href: departmentsIndex(page.props.currentTeam.slug).url,
                  },
              ]
            : [],
    },
    {
        title: 'Отчеты',
        href: page.props.currentTeam
            ? periodsIndex(page.props.currentTeam.slug).url
            : '/',
        icon: FileSpreadsheet,
        items: page.props.currentTeam
            ? [
                  {
                      title: 'Периоды',
                      href: periodsIndex(page.props.currentTeam.slug).url,
                  },
                  {
                      title: 'Объемные показатели',
                      href: operationsIndex(page.props.currentTeam.slug).url,
                  },
                  {
                      title: 'Расход медикаментов',
                      href: medicationExpensesIndex(page.props.currentTeam.slug)
                          .url,
                  },
                  {
                      title: 'Анализ',
                      href: analysisIndex(page.props.currentTeam.slug).url,
                  },
              ]
            : [],
    },
]);

const footerNavItems: NavItem[] = [
    {
        title: 'Repository',
        href: 'https://github.com/laravel/vue-starter-kit',
        icon: FolderGit2,
    },
    {
        title: 'Documentation',
        href: 'https://laravel.com/docs/starter-kits#vue',
        icon: BookOpen,
    },
];
</script>

<template>
    <Sidebar collapsible="icon" variant="inset">
        <SidebarHeader>
            <SidebarMenu>
                <SidebarMenuItem>
                    <SidebarMenuButton size="lg" as-child>
                        <Link :href="dashboardUrl">
                            <AppLogo />
                        </Link>
                    </SidebarMenuButton>
                </SidebarMenuItem>
            </SidebarMenu>
            <SidebarMenu>
                <SidebarMenuItem>
                    <TeamSwitcher />
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarHeader>

        <SidebarContent>
            <NavMain :items="mainNavItems" />
        </SidebarContent>

        <SidebarFooter>
            <NavFooter :items="footerNavItems" />
            <NavUser />
        </SidebarFooter>
    </Sidebar>
    <slot />
</template>
