"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const react = require("@emotion/react");
const React = require("react");
const jsxRuntime = require("@emotion/react/jsx-runtime");
const ReactDOM = require("react-dom");
const ModalWrap = require("./ModalWrap.js");
require("../../../styles.js");
require("../../CheckBox/style.js");
require("../../RadioButton/RadioButtonWrap.js");
require("../../Select/Select/SelectWrap.js");
require("../../Input/style.js");
const useClickOutSide = require("../hooks/useClickOutSide.js");
const uuid = require("../../../utils/uuid.js");
require("../../UploadCell/UploadCellWrap.js");
require("../../Loading/Loading/LoadingWrap.js");
require("../../Loading/FolderLoading/style.js");
const index = require("../../Button/Button/index.js");
require("../../Button/NormalButton/style.js");
require("../../Button/SmallButton/style.js");
require("../../Avatar/style.js");
require("../NormalModal/ModalWrap.js");
const usePortal = require("../hooks/usePortal.js");
require("../FullScreenModal/style.js");
require("../../BottomTabBar/style.js");
require("../../Message/index.js");
require("../../Divider/styles.js");
require("../../Header/styles.js");
require("../../Media/index.js");
require("../../Textarea/styled.js");
require("../../Switch/styled.js");
const CardModal = ({
  title,
  width = 400,
  children,
  onCancel,
  onOk,
  id = uuid.uuid(),
  controlVisible = false,
  showCloseButton = false,
  canClickOutsideToClose = true,
  hiddenScroll = true,
  portal = false,
  parentId = "root",
  trigger,
  cssStyle,
  className,
  style
}) => {
  const [visible, setVisible] = React.useState(controlVisible);
  const modalRef = React.useRef(null);
  React.useEffect(() => {
    setVisible(controlVisible);
  }, [controlVisible]);
  React.useEffect(() => {
    if (!visible) {
      onCancel == null ? void 0 : onCancel();
    }
  }, [visible]);
  const triggerDom = React.useMemo(() => {
    if (!trigger) {
      return null;
    }
    return React.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.useClickOutside(modalRef, () => {
    if (canClickOutsideToClose) {
      handleClose();
    }
  });
  React.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.usePortal(parentId);
  const elements = /* @__PURE__ */ jsxRuntime.jsx(
    ModalWrap.ModalWrap,
    {
      visible,
      width,
      cssStyle,
      className,
      style,
      children: /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: "maskContainer", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modalContainer", ref: modalRef, children: [
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "headerContainer", children: [
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "placeholder" }),
          /* @__PURE__ */ jsxRuntime.jsx("div", { children: title }),
          showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
            index.Button,
            {
              onClick: () => {
                handleClose();
              },
              minWidth: 20,
              type: "text",
              cssStyle: react.css`
                  padding: 0;
                `,
              children: "X"
            }
          )
        ] }),
        /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            onClick: (e) => {
              e.stopPropagation();
            },
            className: "childrenContainer",
            children
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "footerContainer", children: /* @__PURE__ */ jsxRuntime.jsx(
          index.Button,
          {
            onClick: () => {
              if (onOk === void 0 || onOk()) {
                handleClose();
              }
            },
            type: "gray",
            minWidth: 80,
            children: "ok"
          }
        ) })
      ] }) })
    }
  );
  return portal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    triggerDom,
    ReactDOM.createPortal(elements, target)
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    triggerDom,
    elements
  ] });
};
exports.CardModal = CardModal;
//# sourceMappingURL=index.js.map
