"use strict";

exports.__esModule = true;
exports.default = void 0;
var _debounce2 = _interopRequireDefault(require("lodash/fp/debounce"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _cssColorFunction = require("css-color-function");
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _icon = _interopRequireDefault(require("../../atom/icon"));
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
var _colors = require("../../variables/colors");
var _style = _interopRequireDefault(require("./style.css"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const BaseModal = (props, context) => {
  const {
    title,
    description,
    headerIcon,
    children,
    isOpen,
    footer,
    onClose,
    onScroll,
    detectScrollbar = false,
    customStyle
  } = props;
  const {
    skin
  } = context;
  const bodyRef = (0, _react.useRef)(null);
  const [isScrollbarVisible, setIsScrollbarVisible] = (0, _react.useState)(!detectScrollbar);
  const checkScrollbar = () => {
    const bodyElement = bodyRef.current;
    if (bodyElement) {
      setIsScrollbarVisible(bodyElement.scrollHeight > bodyElement.clientHeight);
    }
  };
  (0, _react.useEffect)(() => {
    if (!detectScrollbar) return;
    const bodyElement = bodyRef.current;
    if (!bodyElement) return;
    const debouncedCheckScrollbar = (0, _debounce2.default)(100, () => {
      checkScrollbar();
    });

    // Observer of the body content
    const mutationObserver = new MutationObserver(() => {
      debouncedCheckScrollbar();
    });
    mutationObserver.observe(bodyElement, {
      childList: true,
      subtree: true
    });

    // Observer of the body size
    const resizeObserver = new ResizeObserver(() => {
      debouncedCheckScrollbar();
    });
    if (bodyRef.current) {
      resizeObserver.observe(bodyRef.current);
    }
    checkScrollbar();
    return () => {
      mutationObserver.disconnect();
      resizeObserver.disconnect();
      debouncedCheckScrollbar.cancel();
    };
  }, [children, detectScrollbar]);
  const Footer = (0, _react.useCallback)(() => {
    if ((0, _isEmpty2.default)(footer)) return null;
    if (typeof footer === 'function') return footer();
    const {
      cancelButton,
      confirmButton,
      text,
      isError
    } = footer;
    const {
      label: cancelLabel,
      onCancel,
      disabled: cancelDisabled
    } = cancelButton || {};
    const {
      label: confirmLabel,
      onConfirm,
      disabled: confirmDisabled,
      iconName,
      color
    } = confirmButton || {};
    const buttonConfirmColor = color || (0, _get2.default)('common.primary', skin);
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.footer
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.footerCTAWrapper
    }, onCancel && cancelLabel ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
      className: _style.default.button,
      type: 'secondary',
      onClick: onCancel,
      label: cancelLabel,
      disabled: cancelDisabled,
      'data-testid': `button-link-${cancelLabel}`
    }) : null, onConfirm && confirmLabel ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({
      customStyle: {
        backgroundColor: buttonConfirmColor,
        paddingLeft: '16px'
      },
      hoverBackgroundColor: (0, _cssColorFunction.convert)(`hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`),
      hoverColor: _colors.COLORS.white,
      className: _style.default.button,
      type: 'primary',
      onClick: onConfirm,
      label: confirmLabel,
      disabled: confirmDisabled
    }, iconName ? {
      icon: {
        position: 'left',
        faIcon: {
          name: iconName,
          color: _colors.COLORS.white,
          size: 14,
          customStyle: {
            padding: 0
          }
        }
      }
    } : {}, {
      'data-testid': `button-link-${confirmLabel}`
    }))) : null), text ? /*#__PURE__*/_react.default.createElement("div", {
      className: `${_style.default.footerDescription} ${isError ? _style.default.footerDescriptionError : ''}`
    }, text) : null);
  }, [footer, skin]);
  if (!isOpen || !title || !children) return null;
  function handleOnClose(e) {
    e?.stopPropagation();
    onClose();
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.modalWrapper,
    "data-testid": "modal"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.modal
  }, /*#__PURE__*/_react.default.createElement("header", {
    className: _style.default.header
  }, headerIcon?.name ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.headerIcon
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: headerIcon.name,
    iconColor: headerIcon.color,
    backgroundColor: headerIcon.backgroundColor,
    size: {
      faSize: 20,
      wrapperSize: 48
    }
  })) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.headerContent
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.headerTitle
  }, title), description ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.headerDescription
  }, description) : null), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.headerCloseIcon,
    onClick: handleOnClose,
    "data-testid": "close-icon"
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: "close",
    backgroundColor: "#F4F4F5",
    size: {
      faSize: 14,
      wrapperSize: 28
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    ref: bodyRef,
    className: isScrollbarVisible ? _style.default.body : _style.default.bodyWithoutScrollbar,
    onScroll: onScroll,
    "data-testid": "modal-body",
    style: customStyle
  }, children), /*#__PURE__*/_react.default.createElement(Footer, null)));
};
BaseModal.contextTypes = {
  skin: _provider.default.childContextTypes.skin
};
BaseModal.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string,
  headerIcon: _propTypes.default.shape({
    name: _propTypes.default.string,
    color: _propTypes.default.string,
    backgroundColor: _propTypes.default.string
  }),
  description: _propTypes.default.string,
  children: _propTypes.default.node,
  isOpen: _propTypes.default.bool,
  footer: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
    text: _propTypes.default.string,
    isError: _propTypes.default.boolean,
    cancelButton: _propTypes.default.shape({
      label: _propTypes.default.string,
      onCancel: _propTypes.default.func,
      disabled: _propTypes.default.bool
    }),
    confirmButton: _propTypes.default.shape({
      label: _propTypes.default.string,
      onConfirm: _propTypes.default.func,
      iconName: _propTypes.default.string,
      disabled: _propTypes.default.bool,
      color: _propTypes.default.string
    })
  })]),
  onClose: _propTypes.default.func,
  onScroll: _propTypes.default.func,
  detectScrollbar: _propTypes.default.bool,
  customStyle: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
} : {};
var _default = exports.default = BaseModal;
//# sourceMappingURL=index.js.map