import { Tooltip as OldTooltip, TooltipProps, ConfigProvider } from 'antd';
import React, { useContext, useMemo } from 'react';
import './index.less';
import classNames from 'classnames';
import { LiteralUnion } from 'antd/lib/_util/type';

interface TooltipExtraProps {
  hideArrow?: boolean;
  color?: LiteralUnion<
    | 'pink'
    | 'red'
    | 'yellow'
    | 'orange'
    | 'cyan'
    | 'green'
    | 'blue'
    | 'purple'
    | 'geekblue'
    | 'magenta'
    | 'volcano'
    | 'gold'
    | 'lime'
    | 'success'
    | 'warning'
    | 'error'
    | 'tips',
    string
  >;
}

const Tooltip = (props: Omit<TooltipProps, 'color'> & TooltipExtraProps) => {
  const { hideArrow } = props;
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-tooltip');

  // 隐藏箭头
  const arrowClassName = useMemo(() => (hideArrow ? 'hideArrow' : ''), []);

  // 背景颜色
  const colors = {
    error: 'var(--red-6)',
    success: 'var(--green-6)',
    warning: 'var(--orange-6)',
    tips: 'var(--primary-6)',
  };
  const color = useMemo(() => {
    if (colors[props.color]) {
      return colors[props.color];
    }
    return props.color;
  }, [props.color]);

  return (
    <OldTooltip
      overlay={false}
      {...props}
      overlayClassName={classNames(
        `${prefixCls}-overlay`,
        arrowClassName,
        props.overlayClassName,
      )}
      color={color}
      className={classNames(`${prefixCls}-box`, props.className)}
    >
      {props.children}
    </OldTooltip>
  );
};

export { Tooltip };