import { type SetupContext, ref } from 'vue'
import { design, hooks, $prefix } from '../../index'
import { getComponentName } from '../index'

export default function DesignConfigPropsHOC() {
  return (BaseComponent: any) => {
    return {
      ...BaseComponent,
      props: {},
      setup(props, { attrs, slots, expose }: SetupContext) {
        const innerRef = ref()
        // 获取组件级配置和全局配置（inject需要带有默认值，否则控制台会报警告）
        let globalDesignConfig: DesignConfig = hooks.inject(design.configKey, {})
        // globalDesignConfig 可能是响应式对象，比如 computed
        globalDesignConfig = globalDesignConfig?.value || globalDesignConfig || {}
        const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
        const designConfigProps = designConfig?.props || {}
        const mergedProps = { ...designConfigProps, ...attrs }

        expose(
          new Proxy(
            {},
            {
              get(_target, key) {
                return innerRef.value?.[key]
              },
              has(_target, key) {
                return innerRef.value?.[key]
              }
            }
          )
        )

        return () => {
          return (
            <BaseComponent {...mergedProps} {...attrs} ref={innerRef}>
              {slots}
            </BaseComponent>
          )
        }
      }
    }
  }
}