<template>
	<Disclosure as="div" v-slot="{ open }">
		<div class="flex h-12 items-center border-b px-5">
			<span class="font-semibold">
				<router-link :to="{ name: '站点列表' }">
					<img
						:src="`/assets/jcloud/images/logo.png`"
						class="h-7 w-7 shrink-0"
						alt="今果 Jingrow 徽标"
					/>
				</router-link>
			</span>
			<Dropdown
				class="ml-auto"
				:options="[
					{
						label: $t('Switch Team'),
						icon: 'command',
						onClick: () => (showTeamSwitcher = true)
					},
					{
						label: $t('Logout'),
						icon: 'log-out',
						onClick: $session.logout.submit
					}
				]"
			>
				<template v-slot="{ open }">
					<Button class="ml-auto">
						<template #suffix>
							<i-lucide-chevron-down class="h-3.5 w-3.5 text-gray-700" />
						</template>
						{{ $team?.get.loading ? $t('Loading...') : $team?.pg?.user }}
					</Button>
				</template>
			</Dropdown>

			<DisclosureButton as="template">
				<Button class="ml-2">
					<template #icon>
						<i-lucide-x v-if="open" class="h-4 w-4 text-gray-700" />
						<i-lucide-menu v-else class="h-4 w-4 text-gray-700" />
					</template>
				</Button>
			</DisclosureButton>
		</div>
		<DisclosurePanel class="border-b bg-gray-100 px-5 py-2">
			<NavigationItems>
				<template v-slot="{ navigation }">
					<template v-for="(item, i) in navigation">
						<MobileNavItemGroup
							:key="item.name"
							:item="item"
							v-if="item.children"
						/>
						<MobileNavItem :key="item.name" :item="item" v-else />
					</template>
				</template>
			</NavigationItems>
		</DisclosurePanel>
		<!-- TODO: 在 dashboard-beta 合并后更新组件名称 -->
		<SwitchTeamDialog2 v-model="showTeamSwitcher" />
	</Disclosure>
</template>
<script setup>
import { defineAsyncComponent, ref } from 'vue';
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
import NavigationItems from './NavigationItems.vue';
import MobileNavItem from './MobileNavItem.vue';
import MobileNavItemGroup from './MobileNavItemGroup.vue';

const SwitchTeamDialog2 = defineAsyncComponent(() =>
	import('./SwitchTeamDialog.vue')
);
const showTeamSwitcher = ref(false);

function support() {
	window.open('https://jingrow.com/support', '_blank');
}
</script>