import type { FunctionalComponent, defineComponent } from 'vue'
import { componentMap } from '/@/components/Table/src/componentMap'

import { Popover } from 'ant-design-vue'
import { h } from 'vue'
import type { ComponentType } from '../../types/componentType'

export interface ComponentProps {
    component: ComponentType
    rule: boolean
    popoverVisible: boolean
    ruleMessage: string
    getPopupContainer?: Fn
}

export const CellComponent: FunctionalComponent = (
    { component = 'Input', rule = true, ruleMessage, popoverVisible, getPopupContainer }: ComponentProps,
    { attrs },
) => {
    const Comp = componentMap.get(component) as typeof defineComponent

    const DefaultComp = h(Comp, attrs)
    if (!rule) {
        return DefaultComp
    }
    return h(
        Popover,
        {
            overlayClassName: 'edit-cell-rule-popover',
            visible: !!popoverVisible,
            ...(getPopupContainer ? { getPopupContainer } : {}),
        },
        {
            default: () => DefaultComp,
            content: () => ruleMessage,
        },
    )
}
