import type { Ref, RenderFunction, SetupContext } from 'vue'
import type { StepProps as ElStepProps, StepsEmits as ElStepsEmits, StepsProps as ElStepsProps } from 'element-plus'

import type { StepProps, StepsProps } from '../base'
import type {
  ComponentBaseOptions,
  ComponentSlotType,
  DefineComponentApp,
  DefineComponentInstance,
  Merge,
} from '../common'

// steps
export declare const KSteps: DefineComponentApp<KStepsProps, KStepsEmits, KStepsSlots>

export type KStepsInstance = DefineComponentInstance<KStepsProps, KStepsConstructor>

export interface KStepsConstructor extends ComponentBaseOptions, KStepsMethods {
  props: KStepsProps
  context: SetupContext<KStepsEmits>
  getRefMaps(): KStepsPrivateRef
  getComputeMaps(): KStepsPrivateComputed
  renderVN: RenderFunction
}

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

export interface KStepsPrivateComputed { }

export type KStepsProps = Merge<StepsProps, ElStepsProps>
export type KStepsEmits = ElStepsEmits

export interface KStepsSlots {
  default: () => ComponentSlotType
}

export interface KStepsMethods { }

// step
export declare const KStep: DefineComponentApp<KStepProps, KStepEmits, KStepSlots>

export type KStepInstance = DefineComponentInstance<KStepProps, KStepConstructor>

export interface KStepConstructor extends ComponentBaseOptions, KStepMethods {
  props: KStepProps
  context: SetupContext<KStepEmits>
  getRefMaps(): KStepPrivateRef
  getComputeMaps(): KStepPrivateComputed
  renderVN: RenderFunction
}

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

export interface KStepPrivateComputed { }

export type KStepProps = Merge<StepProps, ElStepProps>

export interface KStepEmits { }

export interface KStepSlots {
  icon: () => ComponentSlotType
  title: () => ComponentSlotType
  description: () => ComponentSlotType
}

export interface KStepMethods { }