import type { Ref, RenderFunction, SetupContext } from 'vue'
import type { MenuItemRegistered } from 'element-plus'

import type { MenuViewProps } from '../base'
import type { ComponentBaseOptions, ComponentSlotType, DefineComponentApp, DefineComponentInstance } from '../common'

export declare const KMenuView: DefineComponentApp<KMenuViewProps, KMenuViewEmits, KMenuViewSlots>

export type KMenuViewInstance = DefineComponentInstance<KMenuViewProps, KMenuViewConstructor>

export interface KMenuViewConstructor extends ComponentBaseOptions, KMenuViewMethods {
  props: KMenuViewProps
  context: SetupContext<KMenuViewEmits>
  getRefMaps(): KMenuViewPrivateRef
  getComputeMaps(): KMenuViewPrivateComputed
  renderVN: RenderFunction
}

export interface KMenuViewPrivateRef {
  refElem: Ref<HTMLDivElement | undefined>
}

export interface KMenuViewPrivateComputed { }

export type KMenuViewProps = MenuViewProps

export type KMenuViewEmits = {
  click: (menuItem: MenuItemRegistered) => void
  select: (activeIndex: string | number) => void
}

export interface KMenuViewSlots {
  'app-logo': () => ComponentSlotType
  header: () => ComponentSlotType
  main: () => ComponentSlotType
  footer: () => ComponentSlotType
  [key: string]: () => ComponentSlotType
}

export type KMenuViewMethods = {
  collapse: () => void
  expand: () => void
  toggleExpand: () => void
}