import './index.less';
import { notification as oldNotification, ConfigProvider } from 'antd';
import { Icon } from '../Icon';
import { Button } from '../Button';
import { ConfigProps, ArgsProps, NotificationApi } from 'antd/lib/notification';
import React from 'react';
import { getUuid } from '@btri-ui/utils';
import classNames from 'classnames';
import { translate } from '../utils';

type Props = { type: string; duration: any };

const IconComponent = (props: Props) => {
  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-notification-notice-icon');
  const { type, duration } = props;
  const iconNames = {
    info: 'AttentionCircleOne',
    success: 'EmotionHappy',
    warning: 'AttentionCircleOne',
    error: 'EmotionUnhappy',
    normal: '',
  };

  const iconNameList = {
    info: 'AttentionCircleOne',
    success: 'CheckOnSquare',
    warning: 'Caution',
    error: 'ErrorDiamond',
    normal: '',
  };

  const iconList =
    duration === undefined || duration ? iconNames : iconNameList;

  return (
    iconNames[type] && (
      <Icon
        iconName={iconList[type]}
        className={classNames(`${prefixCls}`, `${prefixCls}-${type}`)}
        style={{ marginRight: '8px' }}
      />
    )
  );
};

type ConfigContent = React.ReactNode;
type JoinDescription = ConfigContent | ArgsProps;
type JoinMessage = ConfigContent;
type ConfigOnClose = () => void;

type msgType = {
  message: JoinMessage;
  description: JoinDescription;
  onClose?: ConfigOnClose;
  onOk?: () => void;
  onCancle?: () => void;
};
let notification: NotificationApi & {
  normal: (params: msgType & ArgsProps) => any;
  info: (params: msgType & ArgsProps) => any;
  success: (params: msgType & ArgsProps) => any;
  warning: (params: msgType & ArgsProps) => any;
  error: (params: msgType & ArgsProps) => any;
} = {
  ...oldNotification,
  normal: () => {},
  info: () => {},
  success: () => {},
  warning: () => {},
  error: () => {},
};

notification.config({ prefixCls: `btri-notification ant-notification` });

const config = (props: ConfigProps) => {
  const { prefixCls } = props;
  oldNotification.config({
    ...props,
    prefixCls: `btri-notification ${prefixCls}`,
  });
};

const isDuration = (value) => {
  return isNaN(Number(value)) || !!value;
};

const onOkFn = (onOk, key) => {
  onOk && onOk();
  oldNotification.close(key);
};

const onCancleFn = (onCancle, key) => {
  onCancle && onCancle();
  oldNotification.close(key);
};

const getMsgFn = (type: string) => {
  let showMethodType = type;
  if (type === 'normal') {
    showMethodType = 'open';
  }
  return (params: msgType & ArgsProps) => {
    // const { locale } = useContext(ConfigProvider.ConfigContext);
    const newDescription = params.description as ArgsProps;
    const key = newDescription?.key || getUuid();
    const { onClose, message, onOk, onCancle } = params;
    const prefix = 'btri-notification';
    let { duration, closeIcon = <Icon iconName="CloseSmall"></Icon> } = params;
    if (onOk || onCancle) {
      duration = null;
    }
    oldNotification[showMethodType]?.({
      ...params,
      icon: <IconComponent type={type} duration={duration} />,
      onClose,
      duration: duration === undefined ? 5 : duration,
      description: (
        <div className={`${prefix}-description`}>
          <>
            {newDescription}
            {isDuration(duration) && (
              <div
                className={classNames(
                  `${prefix}-line`,
                  `${prefix}-lineContainers-${type}`,
                )}
              >
                <div
                  className={classNames(
                    `${prefix}-lineMain`,
                    `${prefix}-line-${type}`,
                  )}
                  style={{
                    animationDuration: `${duration || 5}s`,
                  }}
                />
              </div>
            )}
            {(onOk || onCancle) && (
              <div className={`${prefix}-buttons`}>
                <Button
                  type="text"
                  onClick={() => {
                    onCancleFn(onCancle, key);
                  }}
                >
                  {translate(
                    'packages.base.src.Notification.index.取消',
                    // locale?.locale,
                  )}
                </Button>
                <Button
                  type="text"
                  textColor="var(--primary-6)"
                  onClick={() => {
                    onOkFn(onOk, key);
                  }}
                >
                  {translate(
                    'packages.base.src.Notification.index.确定',
                    // locale?.locale,
                  )}
                </Button>
              </div>
            )}
          </>
        </div>
      ),
      message: (
        <div className={`${prefix}-message`}>
          {message}
          {isDuration(duration) && showMethodType != 'open' && (
            <div className={`${prefix}-messageLine`} />
          )}
        </div>
      ),
      key,
      closeIcon: isDuration(duration) ? <span /> : closeIcon,
      className: classNames(
        `${params.className}`,
        `${type == 'normal' && 'normalContent'}`,
        `${!isDuration(duration) && 'closeContainer'}`,
        `${!isDuration(duration) && type == 'normal' && 'normalClose'}`,
      ),
    });
  };
};

notification = {
  ...oldNotification,
  normal: getMsgFn('normal'),
  info: getMsgFn('info'),
  success: getMsgFn('success'),
  warning: getMsgFn('warning'),
  error: getMsgFn('error'),
  config,
};

export { notification };