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, useMemo, useImperativeHandle, useRef } from 'react';
import useMergedState from 'rc-util/es/hooks/useMergedState';
import { createPortal } from 'react-dom';
import omit from 'omit.js';
import { noteOnce } from 'rc-util/es/warning';
import Drawer from '../drawer';
import ConfigProvider from '../config-provider';
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 DrawerForm({
  children,
  trigger,
  onVisibleChange,
  drawerProps,
  onFinish,
  title,
  width,
  ...rest
}) {
  var _context$getPopupCont;
  const [visible, setVisible] = useMergedState(!!rest.visible, {
    value: rest.visible,
    onChange: onVisibleChange
  });
  noteOnce(
  // eslint-disable-next-line
  // @ts-expect-error
  !rest.footer || !(drawerProps !== null && drawerProps !== void 0 && drawerProps.footer), 'DrawerForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
  useEffect(() => {
    if (visible && rest.visible) {
      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(true);
    }
  }, [visible]);

  /** 设置 trigger 的情况下，懒渲染优化性能；使之可以直接配合表格操作等场景使用 */
  const isFirstRender = useRef(!(drawerProps !== null && drawerProps !== void 0 && drawerProps.forceRender));

  /**
   * IsFirstRender.current 或者 visible 为 true 的时候就渲染 不渲染能会造成一些问题,比如再次打开值不对了 只有手动配置
   * drawerProps?.destroyOnClose 为 true 的时候才会每次关闭的时候删除 dom
   */
  const shouldRenderFormItems = useMemo(() => {
    if (isFirstRender.current && visible === false) {
      return false;
    }
    if (visible === false && drawerProps !== null && drawerProps !== void 0 && drawerProps.destroyOnClose) {
      return false;
    }
    return true;
  }, [visible, drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.destroyOnClose]);
  /** 同步 props 和 本地 */
  const formRef = useRef();
  const context = useContext(ConfigProvider.ConfigContext);

  /** 如果 destroyOnClose ，重置一下表单 */
  useEffect(() => {
    if (visible) {
      isFirstRender.current = false;
    }
    if (!visible && drawerProps !== null && drawerProps !== void 0 && drawerProps.destroyOnClose) {
      var _formRef$current;
      (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.resetFields();
    }
  }, [drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.destroyOnClose, visible]);
  useImperativeHandle(rest.formRef, () => formRef.current, [formRef.current]);

  /** 不放到 body 上会导致 z-index 的问题 遮罩什么的都遮不住了 */
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/createPortal( /*#__PURE__*/_jsx("div", {
      children: /*#__PURE__*/_jsx(BaseForm, {
        layout: "vertical",
        ...omit(rest, ['visible']),
        formRef: formRef,
        submitter: {
          searchConfig: {
            submitText: '确认',
            resetText: '取消'
          },
          resetButtonProps: {
            onClick: e => {
              var _drawerProps$onClose;
              setVisible(false);
              drawerProps === null || drawerProps === void 0 ? void 0 : (_drawerProps$onClose = drawerProps.onClose) === null || _drawerProps$onClose === void 0 ? void 0 : _drawerProps$onClose.call(drawerProps, e);
            }
          },
          ...rest.submitter
        },
        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);
          }
        },
        contentRender: (item, submitter) => {
          return /*#__PURE__*/_jsx(Drawer, {
            title: title,
            getContainer: false,
            width: width || 800,
            ...drawerProps,
            visible: visible,
            onClose: e => {
              var _drawerProps$onClose2;
              setVisible(false);
              drawerProps === null || drawerProps === void 0 ? void 0 : (_drawerProps$onClose2 = drawerProps.onClose) === null || _drawerProps$onClose2 === void 0 ? void 0 : _drawerProps$onClose2.call(drawerProps, e);
            },
            footer: /*#__PURE__*/_jsx("div", {
              style: {
                display: 'flex',
                justifyContent: 'flex-end'
              },
              children: submitter
            }),
            children: shouldRenderFormItems ? item : null
          });
        },
        children: children
      })
    }), (context === null || context === void 0 ? 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 ? 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 DrawerForm;