import { defineComponent, renderSlot, watch } from 'vue'
import { buildProps, definePropType } from '@kankan-components/utils'
import { provideGlobalConfig, useSizeProp } from '@kankan-components/hooks'

import type { ExtractPropTypes } from 'vue'
// import type { ExperimentalFeatures } from '@kankan-components/tokens'
// import type { Language } from '@kankan-components/locale'
import type { ButtonConfigContext } from '@kankan-components/components/basic/button'
// import type { MessageConfigContext } from '@kankan-components/components/message'

// export const messageConfig: MessageConfigContext = {}
export const messageConfig = {}

export const configProviderProps = buildProps({
  // Controlling if the users want a11y features.
  a11y: {
    type: Boolean,
    default: true,
  },

  // locale: {
  //     type: definePropType<Language>(Object),
  // },

  size: useSizeProp,

  button: {
    type: definePropType<ButtonConfigContext>(Object),
  },

  // experimentalFeatures: {
  //     type: definePropType<ExperimentalFeatures>(Object),
  // },

  // Controls if we should handle keyboard navigation
  keyboardNavigation: {
    type: Boolean,
    default: true,
  },

  message: {
    type: definePropType<any>(Object),
  },

  zIndex: Number,

  namespace: {
    type: String,
    default: 'kk',
  },
} as const)
export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>

const ConfigProvider = defineComponent({
  name: 'UIConfigProvider',
  props: configProviderProps,

  setup(props, { slots }) {
    watch(
      () => props.message,
      (val) => {
        Object.assign(messageConfig, val ?? {})
      },
      { immediate: true, deep: true }
    )
    const config = provideGlobalConfig(props)
    return () => renderSlot(slots, 'default', { config: config?.value })
  },
})
export type ConfigProviderInstance = InstanceType<typeof ConfigProvider>

export default ConfigProvider
