import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import "core-js/modules/es.promise.js";
import React, { useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import useMergedState from 'rc-util/es/hooks/useMergedState';
import omit from 'omit.js';
import { createPortal } from 'react-dom';
import { noteOnce } from 'rc-util/es/warning';
import ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
import ConfigProvider from '../config-provider';
import Modal from '../modal';
import BaseForm from '../wau-base-form';
import './style';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function ModalForm({
  children,
  trigger,
  onVisibleChange,
  modalProps,
  onFinish,
  title,
  width,
  ...rest
}) {
  var _context$locale, _context$locale2, _context$getPopupCont;
  const [visible, setVisible] = useMergedState(!!rest.visible, {
    value: rest.visible,
    onChange: onVisibleChange
  });
  const [scrollLocker] = useState(() => new ScrollLocker());
  noteOnce(
  // eslint-disable-next-line
  // @ts-expect-error
  !rest.footer || !(modalProps !== null && modalProps !== void 0 && modalProps.footer), 'ModalForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
  const context = useContext(ConfigProvider.ConfigContext);
  useEffect(() => {
    if (visible) {
      var _scrollLocker$lock;
      scrollLocker === null || scrollLocker === void 0 || (_scrollLocker$lock = scrollLocker.lock) === null || _scrollLocker$lock === void 0 ? void 0 : _scrollLocker$lock.call(scrollLocker);
    } else {
      var _scrollLocker$unLock;
      scrollLocker === null || scrollLocker === void 0 || (_scrollLocker$unLock = scrollLocker.unLock) === null || _scrollLocker$unLock === void 0 ? void 0 : _scrollLocker$unLock.call(scrollLocker);
    }
    if (visible && rest.visible) {
      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(true);
    }
  }, [visible]);
  useEffect(() => () => {
    var _scrollLocker$unLock2;
    scrollLocker === null || scrollLocker === void 0 || (_scrollLocker$unLock2 = scrollLocker.unLock) === null || _scrollLocker$unLock2 === void 0 ? void 0 : _scrollLocker$unLock2.call(scrollLocker);
  });

  /** 设置 trigger 的情况下，懒渲染优化性能；使之可以直接配合表格操作等场景使用 */
  const isFirstRender = useRef(!(modalProps !== null && modalProps !== void 0 && modalProps.forceRender));
  /**
   * IsFirstRender.current 或者 visible 为 true 的时候就渲染 不渲染能会造成一些问题, 比如再次打开值不对了 只有手动配置
   * drawerProps?.destroyOnClose 为 true 的时候才会每次关闭的时候删除 dom
   */
  const shouldRenderFormItems = useMemo(() => {
    if (isFirstRender.current && visible === false) {
      return false;
    }
    if (visible === false && modalProps !== null && modalProps !== void 0 && modalProps.destroyOnClose) {
      return false;
    }
    return true;
  }, [visible, modalProps === null || modalProps === void 0 ? void 0 : modalProps.destroyOnClose]);

  /** 同步 props 和 本地的 ref */
  const formRef = useRef();

  /** 如果 destroyOnClose ，重置一下表单 */
  useEffect(() => {
    if (visible) {
      isFirstRender.current = false;
    }
    if (!visible && modalProps !== null && modalProps !== void 0 && modalProps.destroyOnClose) {
      var _formRef$current;
      (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.resetFields();
    }
  }, [modalProps === null || modalProps === void 0 ? void 0 : modalProps.destroyOnClose, visible]);
  useImperativeHandle(rest.formRef, () => formRef.current, [formRef.current]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/createPortal( /*#__PURE__*/_jsx("div", {
      children: /*#__PURE__*/_jsx(BaseForm, {
        layout: "vertical",
        ...omit(rest, ['visible']),
        formRef: formRef,
        onFinish: async values => {
          if (!onFinish) {
            return;
          }
          const success = await onFinish(values);
          if (success) {
            var _formRef$current2;
            (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.resetFields();
            setVisible(false);
          }
        },
        submitter: {
          searchConfig: {
            submitText: (modalProps === null || modalProps === void 0 ? void 0 : modalProps.okText) || ((_context$locale = context.locale) === null || _context$locale === void 0 || (_context$locale = _context$locale.Modal) === null || _context$locale === void 0 ? void 0 : _context$locale.okText) || '确认',
            resetText: (modalProps === null || modalProps === void 0 ? void 0 : modalProps.cancelText) || ((_context$locale2 = context.locale) === null || _context$locale2 === void 0 || (_context$locale2 = _context$locale2.Modal) === null || _context$locale2 === void 0 ? void 0 : _context$locale2.cancelText) || '取消'
          },
          submitButtonProps: {
            type: (modalProps === null || modalProps === void 0 ? void 0 : modalProps.okType) || 'primary'
          },
          resetButtonProps: {
            onClick: e => {
              var _modalProps$onCancel;
              modalProps === null || modalProps === void 0 || (_modalProps$onCancel = modalProps.onCancel) === null || _modalProps$onCancel === void 0 ? void 0 : _modalProps$onCancel.call(modalProps, e);
              setVisible(false);
            }
          },
          ...rest.submitter
        },
        contentRender: (item, submitter) => {
          return /*#__PURE__*/_jsx(Modal, {
            title: title,
            getContainer: false,
            width: width || 800,
            bodyStyle: {
              paddingBottom: 0
            },
            ...modalProps,
            visible: visible,
            onCancel: e => {
              var _modalProps$onCancel2;
              setVisible(false);
              modalProps === null || modalProps === void 0 || (_modalProps$onCancel2 = modalProps.onCancel) === null || _modalProps$onCancel2 === void 0 ? void 0 : _modalProps$onCancel2.call(modalProps, e);
            },
            footer: submitter,
            children: shouldRenderFormItems ? item : null
          });
        },
        children: children
      })
    }), (context === null || context === void 0 || (_context$getPopupCont = context.getPopupContainer) === null || _context$getPopupCont === void 0 ? void 0 : _context$getPopupCont.call(context, document.body)) || document.body), trigger && /*#__PURE__*/React.cloneElement(trigger, {
      ...trigger.props,
      onClick: e => {
        var _trigger$props, _trigger$props$onClic;
        setVisible(!visible);
        (_trigger$props = trigger.props) === null || _trigger$props === void 0 || (_trigger$props$onClic = _trigger$props.onClick) === null || _trigger$props$onClic === void 0 ? void 0 : _trigger$props$onClic.call(_trigger$props, e);
      }
    })]
  });
}
export default ModalForm;