import React, { useContext, useMemo } from 'react';
import {
  Popconfirm as OldPopconfirm,
  PopconfirmProps,
  ConfigProvider,
} from 'antd';
import { getRenderPropValue } from 'antd/lib/_util/getRenderPropValue';
import './index.less';
import { Icon } from '../Icon';
import { getIconName } from './constant';
import classNames from 'classnames';
import { translate } from '../utils/index';
type confirmType = 'primary' | 'warning' | 'error';
interface PopoverExtraProps {
  content?: React.ReactNode;
  type?: confirmType;
}
const Popconfirm = (props: PopconfirmProps & PopoverExtraProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-popover');
  const { content, cancelText, okText, title, type, icon } = props;

  const contentNodes = useMemo(() => {
    return (
      <div>
        <div className={`${prefixCls}-PopconfirmTitle`}>
          <div className={`${prefixCls}-typeIcon`}>
            {!icon && type && (
              <Icon
                iconName={getIconName(type)?.iconName}
                className={classNames(
                  `${prefixCls}-${getIconName(type)?.type}`,
                )}
              />
            )}
          </div>
          {title && <div>{getRenderPropValue(title)}</div>}
        </div>
        {content && (
          <div className={`${prefixCls}-PopconfirmContent`}>{content}</div>
        )}
      </div>
    );
  }, [type, content, title, icon]);

  const IconNode = <div className={`${prefixCls}-cusIcon`}>{props.icon}</div>;

  const { locale } = useContext(ConfigProvider.ConfigContext);

  return (
    <OldPopconfirm
      {...props}
      title={contentNodes}
      icon={IconNode || null}
      overlayClassName={classNames(
        `${prefixCls}-box`,
        `${(icon || type) && prefixCls + '-iconBox'}`,
        `${props.overlayClassName}`,
      )}
      cancelText={
        cancelText ||
        translate('packages.base.src.Notification.index.取消', locale?.locale)
      }
      okText={
        okText ||
        translate('packages.base.src.Modal.index.确认', locale?.locale)
      }
    >
      {props.children}
    </OldPopconfirm>
  );
};

export { Popconfirm };