import type { Ref, RenderFunction, SetupContext } from 'vue'

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

export declare const GFPageDetails: DefineComponentApp<GFPageDetailsProps, GFPageDetailsEmits, GFPageDetailsSlots>

export type GFPageDetailsInstance = DefineComponentInstance<GFPageDetailsProps, GFPageDetailsConstructor>

export interface GFPageDetailsConstructor extends ComponentBaseOptions, GFPageDetailsMethods {
  props: GFPageDetailsProps
  context: SetupContext<GFPageDetailsEmits>
  getRefMaps(): GFPageDetailsPrivateRef
  getComputeMaps(): GFPageDetailsPrivateComputed
  renderVN: RenderFunction
}

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

export interface GFPageDetailsPrivateComputed { }

export interface GFPageDetailsSlots {
  'extra-head': () => ComponentSlotType
  'head-title': () => ComponentSlotType
  'head-toolbar': () => ComponentSlotType
  'head-abstract': () => ComponentSlotType
  detail: () => ComponentSlotType
  [key: string]: () => ComponentSlotType
}

export interface GFPageDetailsEmits { }

export type GFPageDetailsMethods = {
  toggleActiveTab: (name: string) => void
}