function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import Button from "../Button";
import { ModalWrap } from "./ModalWrap";
import usePortal from "../..\\utils\\usePortal";
import { uuid } from "../..\\utils\\uuid";
import { useClickOutside } from "../..\\utils\\useClickOutSide";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
const Modal = ({
  children,
  onCancel,
  onOk,
  id: _id = uuid(),
  controlVisible: _controlVisible = false,
  showCloseButton: _showCloseButton = false,
  canClickOutsideToClose: _canClickOutsideToClose = true,
  hiddenScroll: _hiddenScroll = true,
  portal: _portal = false,
  parentId: _parentId = 'root',
  trigger,
  mask: _mask = false
}) => {
  const [visible, setVisible] = useState(_controlVisible);
  const modalRef = useRef(null);
  const triggerDom = useMemo(() => {
    if (!trigger) {
      return null;
    }
    return /*#__PURE__*/React.cloneElement(trigger, _objectSpread(_objectSpread({
      key: 'trigger'
    }, trigger.props), {}, {
      onClick: async 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);
      }
    }));
  }, [setVisible, trigger, visible]);
  const handleClose = () => {
    setVisible(false);
  };
  useClickOutside(modalRef, () => {
    if (_canClickOutsideToClose) {
      handleClose();
    }
  });
  useEffect(() => {
    if (visible && _hiddenScroll) {
      document.body.style.overflow = 'hidden';
      document.body.style.paddingRight = '15px';
    } else {
      document.body.style.overflow = 'auto';
      document.body.style.paddingRight = '0px';
    }
  }, [visible, _id]);
  const target = usePortal(_parentId);
  const elements = /*#__PURE__*/_jsx(ModalWrap, {
    visible: visible,
    mask: _mask,
    children: /*#__PURE__*/_jsx("div", {
      id: _id,
      className: "maskContainer",
      children: /*#__PURE__*/_jsxs("div", {
        className: "modalContainer",
        ref: modalRef,
        children: [/*#__PURE__*/_jsx("div", {
          className: "headerContainer",
          children: _showCloseButton && /*#__PURE__*/_jsx(Button, {
            onClick: () => {
              handleClose();
            },
            width: 20,
            type: 'text',
            label: 'X'
          })
        }), /*#__PURE__*/_jsx("div", {
          onClick: e => {
            e.stopPropagation();
          },
          className: "childrenContainer",
          children: children
        }), /*#__PURE__*/_jsxs("div", {
          className: "footerContainer",
          children: [/*#__PURE__*/_jsx(Button, {
            label: "cancel",
            onClick: () => {
              handleClose();
              onCancel === null || onCancel === void 0 ? void 0 : onCancel();
            },
            style: {
              marginRight: 10
            }
          }), /*#__PURE__*/_jsx(Button, {
            label: "ok",
            type: "primary",
            onClick: () => {
              handleClose();
              onOk === null || onOk === void 0 ? void 0 : onOk();
            }
          })]
        })]
      })
    })
  });
  return _portal ? /*#__PURE__*/_jsxs(_Fragment, {
    children: [triggerDom, /*#__PURE__*/createPortal(elements, target)]
  }) : /*#__PURE__*/_jsxs(_Fragment, {
    children: [triggerDom, elements]
  });
};
export default Modal;