import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
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";
var Modal = function Modal(_ref) {
  var children = _ref.children,
    onCancel = _ref.onCancel,
    onOk = _ref.onOk,
    _ref$id = _ref.id,
    id = _ref$id === void 0 ? uuid() : _ref$id,
    _ref$controlVisible = _ref.controlVisible,
    controlVisible = _ref$controlVisible === void 0 ? false : _ref$controlVisible,
    _ref$showCloseButton = _ref.showCloseButton,
    showCloseButton = _ref$showCloseButton === void 0 ? false : _ref$showCloseButton,
    _ref$canClickOutsideT = _ref.canClickOutsideToClose,
    canClickOutsideToClose = _ref$canClickOutsideT === void 0 ? true : _ref$canClickOutsideT,
    _ref$hiddenScroll = _ref.hiddenScroll,
    hiddenScroll = _ref$hiddenScroll === void 0 ? true : _ref$hiddenScroll,
    _ref$portal = _ref.portal,
    portal = _ref$portal === void 0 ? false : _ref$portal,
    _ref$parentId = _ref.parentId,
    parentId = _ref$parentId === void 0 ? 'root' : _ref$parentId,
    trigger = _ref.trigger,
    _ref$mask = _ref.mask,
    mask = _ref$mask === void 0 ? false : _ref$mask;
  var _useState = useState(controlVisible),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];
  var modalRef = useRef(null);
  var triggerDom = useMemo(function () {
    if (!trigger) {
      return null;
    }
    return /*#__PURE__*/React.cloneElement(trigger, _objectSpread(_objectSpread({
      key: 'trigger'
    }, trigger.props), {}, {
      onClick: function () {
        var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
          var _trigger$props, _trigger$props$onClic;
          return _regeneratorRuntime().wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  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);
                case 2:
                case "end":
                  return _context.stop();
              }
            }
          }, _callee);
        }));
        function onClick(_x) {
          return _onClick.apply(this, arguments);
        }
        return onClick;
      }()
    }));
  }, [setVisible, trigger, visible]);
  var handleClose = function handleClose() {
    setVisible(false);
  };
  useClickOutside(modalRef, function () {
    if (canClickOutsideToClose) {
      handleClose();
    }
  });
  useEffect(function () {
    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]);
  var target = usePortal(parentId);
  var 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: function onClick() {
              handleClose();
            },
            width: 20,
            type: 'text',
            label: 'X'
          })
        }), /*#__PURE__*/_jsx("div", {
          onClick: function onClick(e) {
            e.stopPropagation();
          },
          className: "childrenContainer",
          children: children
        }), /*#__PURE__*/_jsxs("div", {
          className: "footerContainer",
          children: [/*#__PURE__*/_jsx(Button, {
            label: "cancel",
            onClick: function onClick() {
              handleClose();
              onCancel === null || onCancel === void 0 ? void 0 : onCancel();
            },
            style: {
              marginRight: 10
            }
          }), /*#__PURE__*/_jsx(Button, {
            label: "ok",
            type: "primary",
            onClick: function 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;