import React, {
  useEffect,
  useState,
  forwardRef,
  useImperativeHandle,
} from "react";
import ReactDOM, { unmountComponentAtNode } from "react-dom";
import { Modal, ModalProps } from "./ModalMain";
import { ConfigProvider } from "../configprovider";
import { Omit } from "../_type";

export interface ModalShowOptions
  extends Omit<ModalProps, "visible" | "onExited"> {}

export interface ModalShowHandle {
  /**
   * 关闭并销毁当前对话框
   */
  destroy: () => void;
}

/**
 * API 方式唤起一个对话框内容
 */
export function show(options: ModalShowOptions): ModalShowHandle {
  const el = document.createElement("div");

  const instanceRef = React.createRef<ModalShowInstance>();

  ReactDOM.render(
    <ConfigProvider>
      <ModalShow
        {...options}
        ref={instanceRef}
        onExited={() => unmountComponentAtNode(el)}
      />
    </ConfigProvider>,
    el
  );

  return {
    destroy: () => {
      if (instanceRef.current) {
        instanceRef.current.setVisible(false);
      }
    },
  };
}

interface ModalShowProps extends Omit<ModalProps, "visible"> {}

interface ModalShowInstance {
  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
}

const ModalShow = forwardRef(function ModalShow(
  props: ModalShowProps,
  ref: React.Ref<ModalShowInstance>
) {
  const [visible, setVisible] = useState(false);

  // 渲染之后，马上显示
  useEffect(() => {
    setVisible(true);
  }, []);

  // 实例 ref 到外部
  useImperativeHandle(ref, () => ({ setVisible }));

  return <Modal {...props} visible={visible} />;
});