<!-- eslint-disable vue/block-tag-newline -->

<script lang="ts">

import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui'

import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui'

import type { AppConfig } from '@nuxt/schema'

import theme from '#build/ui/navigation-menu'

import type { AvatarProps, BadgeProps, IconProps, LinkProps, PopoverProps, TooltipProps } from '../types'

[key: string]: any

}

export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {

type SingleOrMultipleType = 'single' | 'multiple'

type Orientation = NavigationMenuRootProps['orientation']

type NavigationMenuModelValue<

K extends SingleOrMultipleType = SingleOrMultipleType,

O extends Orientation = Orientation

> = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[]

export interface NavigationMenuProps<

T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>,

K extends SingleOrMultipleType = SingleOrMultipleType,

O extends Orientation = Orientation

> extends Pick<NavigationMenuRootProps, 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'collapsible'> {

/**

* The element or component this component should render as.

* @defaultValue 'div'

*/

as?: any

/**

* Determines whether a "single" or "multiple" items can be selected at a time.

*

* Only works when `orientation` is `vertical`.

* @defaultValue 'multiple'

*/

type?: K

/**

* The controlled value of the active item(s).

* - In horizontal orientation: always `string`

* - In vertical orientation with `type="single"`: `string`

* - In vertical orientation with `type="multiple"`: `string[]`

*

* Use this when you need to control the state of the items. Can be binded with `v-model`

*/

modelValue?: NavigationMenuModelValue<K, O>

/**

* The default active value of the item(s).

* - In horizontal orientation: always `string`

* - In vertical orientation with `type="single"`: `string`

* - In vertical orientation with `type="multiple"`: `string[]`

*

* Use when you do not need to control the state of the item(s).

*/

defaultValue?: NavigationMenuModelValue<K, O>

/**

* The icon displayed to open the menu.

* @defaultValue appConfig.ui.icons.chevronDown

* The orientation of the menu.

* @defaultValue 'horizontal'

*/

orientation?: NavigationMenuRootProps['orientation']

orientation?: O

/**

* Collapse the navigation menu to only show icons.

* Only works when `orientation` is `vertical`.

ui?: NavigationMenu['slots']

}

export interface NavigationMenuEmits extends NavigationMenuRootEmits {}

export type NavigationMenuEmits<

K extends SingleOrMultipleType = SingleOrMultipleType,

O extends Orientation = Orientation

> = {

/**

* Event handler called when the value changes.

* - In horizontal orientation: emits `string`

* - In vertical orientation with `type="single"`: emits `string | undefined`

* - In vertical orientation with `type="multiple"`: emits `string[] | undefined`

*/

'update:modelValue': [value: NavigationMenuModelValue<K, O> | undefined]

}

type SlotProps<T extends NavigationMenuItem> = (props: { item: T, index: number, active?: boolean, ui: NavigationMenu['ui'] }) => any

</script>

<script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>">

<script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation">

import { computed, toRef } from 'vue'

import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui'

import { defu } from 'defu'

defineOptions({ inheritAttrs: false })

const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {

orientation: 'horizontal',

const props = withDefaults(defineProps<NavigationMenuProps<T, K, O>>(), {

orientation: 'horizontal' as never,

contentOrientation: 'horizontal',

externalIcon: true,

delayDuration: 0,

type: 'multiple',

type: 'multiple' as never,

collapsible: true,

unmountOnHide: true,

labelKey: 'label'

})

const emits = defineEmits<NavigationMenuEmits>()

const emits = defineEmits<NavigationMenuEmits<K, O>>()

const slots = defineSlots<NavigationMenuSlots<T>>()

const appConfig = useAppConfig() as NavigationMenu['AppConfig']

const rootProps = useForwardPropsEmits(computed(() => ({

as: props.as,

modelValue: props.modelValue,

defaultValue: props.defaultValue,

delayDuration: props.delayDuration,

skipDelayDuration: props.skipDelayDuration,

orientation: props.orientation,

</component>

</DefineItemTemplate>

<NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">

<NavigationMenuRoot

v-bind="{

...rootProps,

...(orientation === 'horizontal' ? {

modelValue: modelValue as string,

defaultValue: defaultValue as string

} : {}),

...$attrs

}"

:data-collapsed="collapsed"

data-slot="root"

:class="ui.root({ class: [props.ui?.root, props.class] })"

>

<slot name="list-leading" />

<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">

<component

v-bind="orientation === 'vertical' && !collapsed ? {

...accordionProps,

defaultValue: getAccordionDefaultValue(list)

modelValue,

defaultValue: defaultValue ?? getAccordionDefaultValue(list)

} : {}"

:is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"

as="ul"