import React from 'react';
import { Modal, ModalFuncProps } from 'antd';
import classNames from 'classnames';
import { Icon } from '../Icon';
import './index.less';

const _prefix = 'ant-btri';
let prefixCls = _prefix + '-modal';

export function modalGlobalConfig({
  rootPrefixCls,
}: {
  rootPrefixCls: string;
}) {
  prefixCls = rootPrefixCls;
}

interface ConfirmProps extends ModalFuncProps {
  footer?: null | React.ReactNode;
}

type ConfigUpdate =
  | ModalFuncProps
  | ((prevConfig: ModalFuncProps) => ModalFuncProps);

type ModalFunc = (
  props: ConfirmProps,
) => {
  destroy: () => void;
  update: (configUpdate: ConfigUpdate) => void;
};

export type ModalStaticFunctions = Record<
  NonNullable<ModalFuncProps['type']>,
  ModalFunc
>;

const getCommonPorps = (
  {
    closeIcon,
    title,
    className,
    width = '400px',
    footer,
    icon,
    closable = true,
    autoFocusButton = null,
    cancelButtonProps = {},
    okButtonProps,
    ...props
  }: ConfirmProps,
  type: ConfirmProps['type'],
) => {
  const iconNames = {
    info: 'AttentionCircleOne',
    success: 'CheckOnCircleOne',
    warning: 'Caution',
    warn: 'Caution',
    error: 'ErrorTwo',
  };
  const styles = {
    info: 'var(--primary-color)',
    success: 'var(--green-6)',
    error: 'var(--red-6)',
    warning: 'var(--orange-6)',
    warn: 'var(--orange-6)',
  };
  const IconComp = () => {
    return icon === null
      ? null
      : icon || (
          <Icon
            iconName={iconNames[type]}
            style={{
              fontSize: '24px',
              color: styles[type],
            }}
          />
        );
  };

  const titleComp = () => {
    return typeof title === 'string' ? (
      <div className={classNames(`${prefixCls}-confirm-title`)}>
        {IconComp()}
        {title}
      </div>
    ) : (
      title
    );
  };

  const getCloseIcon = () => {
    return (
      closeIcon || (
        <Icon
          style={{ fontSize: '20px', color: 'var(--caption-font)' }}
          iconName="CloseSmall"
        />
      )
    );
  };

  return {
    ...props,
    width,
    icon: null,
    closeIcon: getCloseIcon(),
    title: titleComp(),
    closable,
    autoFocusButton,
    cancelButtonProps: {
      ...cancelButtonProps,
      className: classNames(
        `${_prefix}-btn-box ant-btri-btn-secondary ${prefixCls}-cancelBtn`,
        cancelButtonProps?.className,
      ),
    },
    okButtonProps: {
      ...okButtonProps,
      className: classNames(`${prefixCls}-okBtn`, okButtonProps?.className),
    },
    className: classNames(
      `${prefixCls}-box`,
      `${prefixCls}-confirm`,
      `${prefixCls}-box--default`,
      {
        [`${prefixCls}-noFooter`]: footer === null,
        [`${prefixCls}-confirm-noIcon`]: icon === null,
      },
      className,
    ),
  };
};

const list: ConfirmProps['type'][] = [
  'warn',
  'warning',
  'success',
  'info',
  'confirm',
  'error',
];

const init = (() => {
  const obj: any = {};
  for (let vo of list) {
    obj[vo] = (props: ConfirmProps) =>
      Modal.confirm({
        ...(getCommonPorps(props, vo) as ModalFuncProps),
      });
  }
  return obj;
})();

export default init;