import {FC, MouseEvent, ComponentType, ReactNode} from 'react'

export interface CustomIconDefaultOption {
    defaultCustomSvg?: FC
    defaultCustomNode?: ReactNode
}

export function createCustomIcon(
    {
        className = '',
        Icon,

        defaultSvg,
    }: {
        className: string

        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        Icon: ComponentType<any>

        defaultSvg: FC
    }
) {
    /**
     * 避免 input 被 blur 掉
     *
     * @param e
     */
    const handleMouseDown = (e: MouseEvent) => {
        e.preventDefault()
    };

    return class CustomIcon {

        opts: CustomIconDefaultOption

        constructor(opts: CustomIconDefaultOption) {
            this.opts = opts
        }

        render(
            {
                iconSvg,
                iconNode,
                onClick,
            }: {
                iconSvg?: FC
                iconNode?: ReactNode
                onClick: (e: MouseEvent) => void
            }
        ) {
            const {
                defaultCustomNode,
                defaultCustomSvg,
            } = this.opts

            const iconItemToMatch = [
                ['svg', iconSvg],
                ['node', iconNode],
                ['svg', defaultCustomSvg],
                ['node', defaultCustomNode],
                ['svg', defaultSvg],
            ] as const;

            const matchedIconItem = iconItemToMatch.find(item => item[1])

            if (!matchedIconItem) {
                return null;
            }

            if (matchedIconItem[0] === 'svg') {
                return (
                    <Icon
                        svg={matchedIconItem[1] as FC}
                        onMouseDown={handleMouseDown}
                        // 'brick-calender-icon'
                        className={className}
                        onClick={onClick}
                    />
                )
            }

            return (
                <span
                    className={className}
                    onMouseDown={handleMouseDown}
                    onClick={onClick}
                >
                    {iconNode || defaultCustomNode}
                </span>
            )
        }
    }
}