import _debounce from "lodash/fp/debounce";
import _get from "lodash/fp/get";
import _isEmpty from "lodash/fp/isEmpty";
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); }
import React, { useCallback, useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { convert } from 'css-color-function';
import Provider from '../../atom/provider';
import Icon from '../../atom/icon';
import ButtonLink from '../../atom/button-link';
import { COLORS } from '../../variables/colors';
import style from './style.css';
const BaseModal = (props, context) => {
  const {
    title,
    description,
    headerIcon,
    children,
    isOpen,
    footer,
    onClose,
    onScroll,
    detectScrollbar = false,
    customStyle
  } = props;
  const {
    skin
  } = context;
  const bodyRef = useRef(null);
  const [isScrollbarVisible, setIsScrollbarVisible] = useState(!detectScrollbar);
  const checkScrollbar = () => {
    const bodyElement = bodyRef.current;
    if (bodyElement) {
      setIsScrollbarVisible(bodyElement.scrollHeight > bodyElement.clientHeight);
    }
  };
  useEffect(() => {
    if (!detectScrollbar) return;
    const bodyElement = bodyRef.current;
    if (!bodyElement) return;
    const debouncedCheckScrollbar = _debounce(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 = useCallback(() => {
    if (_isEmpty(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 || _get('common.primary', skin);
    return /*#__PURE__*/React.createElement("div", {
      className: style.footer
    }, /*#__PURE__*/React.createElement("div", {
      className: style.footerCTAWrapper
    }, onCancel && cancelLabel ? /*#__PURE__*/React.createElement(ButtonLink, {
      className: style.button,
      type: 'secondary',
      onClick: onCancel,
      label: cancelLabel,
      disabled: cancelDisabled,
      'data-testid': `button-link-${cancelLabel}`
    }) : null, onConfirm && confirmLabel ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, _extends({
      customStyle: {
        backgroundColor: buttonConfirmColor,
        paddingLeft: '16px'
      },
      hoverBackgroundColor: convert(`hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`),
      hoverColor: COLORS.white,
      className: style.button,
      type: 'primary',
      onClick: onConfirm,
      label: confirmLabel,
      disabled: confirmDisabled
    }, iconName ? {
      icon: {
        position: 'left',
        faIcon: {
          name: iconName,
          color: COLORS.white,
          size: 14,
          customStyle: {
            padding: 0
          }
        }
      }
    } : {}, {
      'data-testid': `button-link-${confirmLabel}`
    }))) : null), text ? /*#__PURE__*/React.createElement("div", {
      className: `${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`
    }, text) : null);
  }, [footer, skin]);
  if (!isOpen || !title || !children) return null;
  function handleOnClose(e) {
    e?.stopPropagation();
    onClose();
  }
  return /*#__PURE__*/React.createElement("div", {
    className: style.modalWrapper,
    "data-testid": "modal"
  }, /*#__PURE__*/React.createElement("div", {
    className: style.modal
  }, /*#__PURE__*/React.createElement("header", {
    className: style.header
  }, headerIcon?.name ? /*#__PURE__*/React.createElement("div", {
    className: style.headerIcon
  }, /*#__PURE__*/React.createElement(Icon, {
    iconName: headerIcon.name,
    iconColor: headerIcon.color,
    backgroundColor: headerIcon.backgroundColor,
    size: {
      faSize: 20,
      wrapperSize: 48
    }
  })) : null, /*#__PURE__*/React.createElement("div", {
    className: style.headerContent
  }, /*#__PURE__*/React.createElement("div", {
    className: style.headerTitle
  }, title), description ? /*#__PURE__*/React.createElement("div", {
    className: style.headerDescription
  }, description) : null), /*#__PURE__*/React.createElement("div", {
    className: style.headerCloseIcon,
    onClick: handleOnClose,
    "data-testid": "close-icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    iconName: "close",
    backgroundColor: "#F4F4F5",
    size: {
      faSize: 14,
      wrapperSize: 28
    }
  }))), /*#__PURE__*/React.createElement("div", {
    ref: bodyRef,
    className: isScrollbarVisible ? style.body : style.bodyWithoutScrollbar,
    onScroll: onScroll,
    "data-testid": "modal-body",
    style: customStyle
  }, children), /*#__PURE__*/React.createElement(Footer, null)));
};
BaseModal.contextTypes = {
  skin: Provider.childContextTypes.skin
};
BaseModal.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string,
  headerIcon: PropTypes.shape({
    name: PropTypes.string,
    color: PropTypes.string,
    backgroundColor: PropTypes.string
  }),
  description: PropTypes.string,
  children: PropTypes.node,
  isOpen: PropTypes.bool,
  footer: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    text: PropTypes.string,
    isError: PropTypes.boolean,
    cancelButton: PropTypes.shape({
      label: PropTypes.string,
      onCancel: PropTypes.func,
      disabled: PropTypes.bool
    }),
    confirmButton: PropTypes.shape({
      label: PropTypes.string,
      onConfirm: PropTypes.func,
      iconName: PropTypes.string,
      disabled: PropTypes.bool,
      color: PropTypes.string
    })
  })]),
  onClose: PropTypes.func,
  onScroll: PropTypes.func,
  detectScrollbar: PropTypes.bool,
  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
} : {};
export default BaseModal;
//# sourceMappingURL=index.js.map