import type { ComputedRef, InjectionKey } from 'vue'
import { computed, inject, provide } from 'vue'

import type { MenuProps } from './Menu'

// Used for Dropdown only
export interface OverrideContextProps {
  prefixCls?: ComputedRef<string>
  mode?: ComputedRef<MenuProps['mode']>
  selectable?: ComputedRef<boolean>
  validator?: (menuProps: Pick<MenuProps, 'mode'>) => void
  onClick?: () => void
  expandIcon?: ComputedRef<any>
}
export const OverrideContextKey: InjectionKey<OverrideContextProps> = Symbol('OverrideContextKey')
export const useInjectOverride = () => {
  return inject(OverrideContextKey, undefined)
}

export const useProvideOverride = (props: OverrideContextProps) => {
  const { prefixCls, mode, selectable, validator, onClick, expandIcon } = useInjectOverride() || {}
  provide(OverrideContextKey, {
    prefixCls: computed(() => (props.prefixCls?.value ?? prefixCls?.value) as string),
    mode: computed(() => props.mode?.value ?? mode?.value),
    selectable: computed(() => (props.selectable?.value ?? selectable?.value) as boolean),
    validator: props.validator ?? validator,
    onClick: props.onClick ?? onClick,
    expandIcon: props.expandIcon ?? expandIcon?.value,
  })
}
