import React, { memo } from 'react';

import { attachPropertiesToComponent } from '../helpers';

import type { PopupProps, PopupPageProps } from './interface';
import Popup from './popup';
import PopupHeader from './popup-header';
import PopupKeyboardShim from './popup-keyboard-shim';
import PopupPage from './popup-page';
import { varCreator, styleCreator } from './style';
import { usePortal } from '../../common/portal';

/**
 * Popup 弹出层
 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
 */
const PopupContainer: React.FC<PopupProps> = (props: PopupProps) => {
  const {
    Component,
    visible,
    useNative,
    statusBarTranslucent,
    onClosed,
    space,
    softInputMode,
    modalHeaderSpace,
    presentInCurrentWindow,
    onRequestClose,
  } = usePortal(props);

  return (
    <Component
      transparent
      visible={visible}
      onRequestClose={onRequestClose}
      statusBarTranslucent={statusBarTranslucent}
      {...{
        softInputMode,
        space,
        modalHeaderSpace,
        presentInCurrentWindow,
      }}
    >
      <Popup useNative={useNative} {...props} onClosed={onClosed} />
    </Component>
  );
};

const PopupPageContainer: React.FC<PopupPageProps> = (props) => {
  const { Component, visible, useNative, statusBarTranslucent, onClosed } =
    usePortal(props);

  return (
    <Component
      transparent
      visible={visible}
      onRequestClose={props.onClosed}
      statusBarTranslucent={statusBarTranslucent}
    >
      <PopupPage useNative={useNative} {...props} onClosed={onClosed} />
    </Component>
  );
};

export default attachPropertiesToComponent(memo(PopupContainer), {
  varCreator,
  styleCreator,
  PopupComponent: Popup,
  Header: PopupHeader,
  Page: PopupPageContainer,
  PageComponent: PopupPage,
  KeyboardShim: PopupKeyboardShim,
});