import { css } from "@emotion/react";
import React__default, { useState, useRef, useEffect, useMemo } from "react";
import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
import { createPortal } from "react-dom";
import { ModalWrap } from "./ModalWrap.js";
import "../../../styles.js";
import "../../CheckBox/style.js";
import "../../RadioButton/RadioButtonWrap.js";
import "../../Select/Select/SelectWrap.js";
import "../../Input/style.js";
import { useClickOutside } from "../hooks/useClickOutSide.js";
import { uuid } from "../../../utils/uuid.js";
import "../../UploadCell/UploadCellWrap.js";
import "../../Loading/Loading/LoadingWrap.js";
import "../../Loading/FolderLoading/style.js";
import { Button } from "../../Button/Button/index.js";
import "../../Button/NormalButton/style.js";
import "../../Button/SmallButton/style.js";
import "../../Avatar/style.js";
import "../NormalModal/ModalWrap.js";
import { usePortal } from "../hooks/usePortal.js";
import "../FullScreenModal/style.js";
import "../../BottomTabBar/style.js";
import "../../Message/index.js";
import "../../Divider/styles.js";
import "../../Header/styles.js";
import "../../Media/index.js";
import "../../Textarea/styled.js";
import "../../Switch/styled.js";
const CardModal = ({
  title,
  width = 400,
  children,
  onCancel,
  onOk,
  id = uuid(),
  controlVisible = false,
  showCloseButton = false,
  canClickOutsideToClose = true,
  hiddenScroll = true,
  portal = false,
  parentId = "root",
  trigger,
  cssStyle,
  className,
  style
}) => {
  const [visible, setVisible] = useState(controlVisible);
  const modalRef = useRef(null);
  useEffect(() => {
    setVisible(controlVisible);
  }, [controlVisible]);
  useEffect(() => {
    if (!visible) {
      onCancel == null ? void 0 : onCancel();
    }
  }, [visible]);
  const triggerDom = useMemo(() => {
    if (!trigger) {
      return null;
    }
    return React__default.cloneElement(trigger, {
      key: "trigger",
      ...trigger.props,
      onClick: async (e) => {
        var _a, _b;
        setVisible(!visible);
        (_b = (_a = trigger.props) == null ? void 0 : _a.onClick) == null ? void 0 : _b.call(_a, e);
      }
    });
  }, [trigger, visible]);
  const handleClose = () => {
    setVisible(false);
  };
  useClickOutside(modalRef, () => {
    if (canClickOutsideToClose) {
      handleClose();
    }
  });
  useEffect(() => {
    if (visible && hiddenScroll) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "auto";
      document.body.style.paddingRight = "0px";
    }
  }, [visible, id]);
  const target = usePortal(parentId);
  const elements = /* @__PURE__ */ jsx(
    ModalWrap,
    {
      visible,
      width,
      cssStyle,
      className,
      style,
      children: /* @__PURE__ */ jsx("div", { id, className: "maskContainer", children: /* @__PURE__ */ jsxs("div", { className: "modalContainer", ref: modalRef, children: [
        /* @__PURE__ */ jsxs("div", { className: "headerContainer", children: [
          /* @__PURE__ */ jsx("div", { className: "placeholder" }),
          /* @__PURE__ */ jsx("div", { children: title }),
          showCloseButton && /* @__PURE__ */ jsx(
            Button,
            {
              onClick: () => {
                handleClose();
              },
              minWidth: 20,
              type: "text",
              cssStyle: css`
                  padding: 0;
                `,
              children: "X"
            }
          )
        ] }),
        /* @__PURE__ */ jsx(
          "div",
          {
            onClick: (e) => {
              e.stopPropagation();
            },
            className: "childrenContainer",
            children
          }
        ),
        /* @__PURE__ */ jsx("div", { className: "footerContainer", children: /* @__PURE__ */ jsx(
          Button,
          {
            onClick: () => {
              if (onOk === void 0 || onOk()) {
                handleClose();
              }
            },
            type: "gray",
            minWidth: 80,
            children: "ok"
          }
        ) })
      ] }) })
    }
  );
  return portal ? /* @__PURE__ */ jsxs(Fragment, { children: [
    triggerDom,
    createPortal(elements, target)
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
    triggerDom,
    elements
  ] });
};
export {
  CardModal
};
//# sourceMappingURL=index.js.map
