import type { ButtonProps } from 'antd';
import { Button, theme, Tooltip } from 'antd';
import React from 'react';
import IconFont from '../IconFont';

type TooltipIconFontButtonProps = {
  tooltip?: string;
  iconFontName: string;
  color?: string;
  onClick?: () => void;
} & Omit<ButtonProps, 'icon' | 'color'>;

const TooltipIconFontButton: React.FC<TooltipIconFontButtonProps> = ({
  tooltip,
  iconFontName,
  color,
  onClick,
  ...buttonProps
}) => {
  const { token } = theme.useToken();
  const wrapperClassName = `tooltip-iconfont-wrapper-${color?.replace(
    /[^a-zA-Z0-9]/g,
    '-',
  )}`;
  const icon = (
    <IconFont
      type={iconFontName}
      style={{ color: color || token.colorText }}
      className={wrapperClassName}
    />
  );

  if (tooltip) {
    return (
      <Tooltip title={tooltip}>
        <Button
          onClick={onClick}
          icon={icon}
          {...buttonProps}
          style={
            color
              ? {
                  ...buttonProps.style,
                  ['--icon-button-color' as string]: color,
                }
              : buttonProps.style
          }
        />
      </Tooltip>
    );
  }

  return (
    <Button
      onClick={onClick}
      icon={icon}
      {...buttonProps}
      style={
        color
          ? {
              ...buttonProps.style,
              ['--icon-button-color' as string]: color,
            }
          : buttonProps.style
      }
    />
  );
};

export default TooltipIconFontButton;
