import { Modal, ModalFuncProps } from 'ant-design-vue';
import { CloseCircleOutlined } from '@ant-design/icons-vue';

import { merge } from 'lodash-es';
import { watch } from 'vue';
import Progress from './Progress';

import './style/index.less';

import { ModalFuncPropsExtend, Status } from './types';

import { _t } from '@kt/unity-locale';

// Modal 全局配置，可被覆盖
const options: ModalFuncPropsExtend = {
  closable: false,
  maskClosable: false,
  keyboard: false,
  centered: true
};

export const setGlobalOptions = (_options: ModalFuncProps) => {
  Object.assign(options, _options);
};

let stop: any;
const ModalProgress = (props: ModalFuncPropsExtend) => {
  let isModalVisible = true;

  const cb = (status?: Status) => {
    if (status === 'success') {
      props.onSuccess?.();
    } else if (status === 'error') {
      props.onError?.();
    }
  };

  // 手动清空 watch，这里 watch 没有在一个组件上，所以不会自动清空
  stop?.();

  /**
   * ✨ 监听状态改变，当 modal 还存在的时候，不触发调用回调函数
   * 在 afterClose 也有这个逻辑，因为 modal 关闭有一段动画时间，为了保证 modal ”关闭完整“ 再触发回调，所以写到了 afterClose
   * 但是也考虑到了，如果 modal 被提前关闭的场景，这个时候就不会触发 afterClose 的 onSuccess 或 onError 逻辑，所以在这里做一个补充
   */
  stop = watch(
    () => props.status?.(),
    val => {
      // modal 还存在，不执行底下逻辑，
      if (isModalVisible) return;
      cb(val);
    }
  );

  const modal: any = { value: null };
  // default set
  props = merge(
    {
      fake: true,
      successAutoClose: true,
      errorAutoClose: true,
      tips: {
        normal: '',
        // loading: '加载中，请稍后...',
        loading: _t('KTUnity.ModalProgress.loading'),
        success: '',
        // error: '发生错误，请稍后再试'
        error: _t('KTUnity.ModalProgress.error')
      }
    },
    props
  );

  const content = () => (
    <Progress
      {...props}
      onDestoryModal={() => {
        modal.value?.destroy();
      }}
    />
  );

  const outerAfterClose = props.afterClose;
  props = {
    ...options,
    ...props,

    // #region 这里的参数强制覆盖
    // width: 750,
    width: 'auto',
    closeIcon: (
      <CloseCircleOutlined style={{ color: '#fff', fontSize: '32px' }} />
    ),
    wrapClassName: 'unity-modal-progress',
    // @ts-ignore
    destroyOnClose: true,
    content,
    afterClose() {
      isModalVisible = false;

      // 先执行外部，保证外部逻辑可行
      outerAfterClose?.();

      // 再执行内部逻辑
      cb(props.status?.());
    }
    // #endregion
  };
  modal.value = Modal.success(props);

  return modal.value as {
    destroy: () => void;
    update: (newConfig: ModalFuncProps) => void;
  };
};
export default ModalProgress;
