"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _constants = require("../../constants");

var _Overlay = _interopRequireDefault(require("../Overlay"));

var _ClosingConfirmation = require("../ClosingConfirmation");

var _Form = _interopRequireDefault(require("../Form"));

var _Button = _interopRequireDefault(require("../Button"));

var _Heading = _interopRequireDefault(require("../Heading"));

var _Text = _interopRequireDefault(require("../Text"));

var _Translate = _interopRequireWildcard(require("../Translate"));

var _utils = require("../utils");

// Copyright 1999-2021. Plesk International GmbH. All rights reserved.

/* eslint-disable react/no-deprecated */
const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/(0, _react.isValidElement)(value);
/**
 * `Dialog` is a modal window that asks users to make a decision or enter additional information.
 * @since 0.0.68
 */


const Dialog = ({
  baseClassName,
  className,
  children,
  actions,
  isOpen,
  banner,
  image,
  title,
  subtitle,
  cancelTitle,
  cancelButton,
  buttons,
  form,
  size,
  closable,
  onClose,
  closingConfirmation,
  ...props
}) => {
  const [isVisible, setIsVisible] = (0, _react.useState)(isOpen);
  const {
    onCloseWithConfirmation,
    closingConfirmationDialog
  } = (0, _ClosingConfirmation.useClosingConfirmation)({
    onClose: () => {
      setIsVisible(false);
      (0, _utils.safeInvoke)(onClose);
    },
    closingConfirmation
  });
  (0, _react.useEffect)(() => {
    setIsVisible(isOpen);
  }, [isOpen]);

  const renderImage = (image, block) => {
    const classPrefix = "".concat(baseClassName, "__").concat(block);

    if ( /*#__PURE__*/(0, _react.isValidElement)(image)) {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: classPrefix
      }, image);
    }

    if (typeof image === 'string') {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: classPrefix
      }, /*#__PURE__*/_react.default.createElement("img", {
        className: "".concat(classPrefix, "-inner"),
        src: image
      }));
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: classPrefix
    }, /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
      className: "".concat(classPrefix, "-inner")
    }, image)));
  };

  const getCancelButtonProps = () => {
    if (!closable) {
      return false;
    }

    if (cancelButton === false || form && form.cancelButton === false) {
      return false;
    }

    let props = {
      onClick: onCloseWithConfirmation,
      children: cancelTitle || /*#__PURE__*/_react.default.createElement(_Translate.default, {
        content: "Dialog.cancelButton",
        fallback: "Cancel"
      })
    };

    if (form && isProps(form.cancelButton)) {
      props = { ...props,
        ...form.cancelButton
      };
    }

    if (isProps(cancelButton)) {
      props = { ...props,
        ...cancelButton
      };
    }

    return props;
  };

  const renderButtons = () => {
    if (form) {
      return null;
    }

    let cancel;
    const cancelButtonProps = getCancelButtonProps();

    if (cancelButtonProps) {
      cancel = /*#__PURE__*/_react.default.createElement(_Button.default, cancelButtonProps);
    }

    if (buttons || cancel) {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(baseClassName, "__buttons")
      }, buttons, cancel);
    }

    return null;
  };

  let childrenElement;

  if (form) {
    form.cancelButton = getCancelButtonProps();
    form.footerClassName = (0, _classnames.default)(form.footerClassName, "".concat(baseClassName, "__form-footer"));
    form.applyButton = form.applyButton || false;
    childrenElement = /*#__PURE__*/_react.default.createElement(_Form.default, form, children);
  } else {
    childrenElement = children;
  }

  return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({
    className: (0, _classnames.default)(baseClassName, className),
    isOpen: isVisible,
    onClose: onCloseWithConfirmation,
    canCloseOnBackdropClick: closable,
    canCloseOnEscapePress: closable,
    size: size
  }, props), (title || subtitle || actions) && /*#__PURE__*/_react.default.createElement("header", {
    className: "".concat(baseClassName, "__header")
  }, banner && renderImage(banner, 'banner'), /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(baseClassName, "__header-inner")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(baseClassName, "__header-body")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(baseClassName, "__header-content")
  }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
    level: "2",
    className: "".concat(baseClassName, "__title")
  }, title) : /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(baseClassName, "__title")
  }, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(baseClassName, "__subtitle")
  }, (0, _Translate.isLikeText)(subtitle) ? /*#__PURE__*/_react.default.createElement(_Text.default, {
    intent: "muted"
  }, subtitle) : subtitle)), (actions || closable) && /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(baseClassName, "__header-actions")
  }, actions, closable && /*#__PURE__*/_react.default.createElement(_Button.default, {
    className: "".concat(baseClassName, "__header-close"),
    ghost: true,
    size: "lg",
    icon: "cross-mark",
    onClick: onCloseWithConfirmation
  }))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(baseClassName, "__content")
  }, image && renderImage(image, 'image'), childrenElement, renderButtons()), closingConfirmationDialog);
};

Dialog.propTypes = {
  /**
   * Toggles visibility.
   * @since 0.0.68
   */
  isOpen: _propTypes.default.bool,

  /**
   * Banner. Renders in front of content as wide as dialog.
   * @since 0.0.68
   */
  banner: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),

  /**
   * Block with an image, placed at the side of the component
   * @since 3.25.0
   */
  sideBanner: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),

  /**
   * Additional properties for the sideBanner
   * @since 3.25.0
   */
  sideBannerContainer: _propTypes.default.shape({
    /**
     * Values for css background property
     */
    background: _propTypes.default.string,

    /**
     * One of: center, flex-start, flex-end
     */
    align: _propTypes.default.oneOf(['center', 'flex-start', 'flex-end'])
  }),

  /**
   * Image. Renders into content.
   * @since 0.0.68
   */
  image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),

  /**
   * Title
   * @since 0.0.68
   */
  title: _propTypes.default.node,

  /**
   * The subtitle of the `Dialog`.
   * @since 4.0.0
   */
  subtitle: _propTypes.default.node,

  /**
   * Title of "cancel" button
   * @since 0.0.68
   * @deprecated Use `cancelButton` instead.
   */
  cancelTitle: _propTypes.default.node,

  /**
   * Cancel button visibility or custom configuration. It accepts all props of the `Button` component.
   * @since 3.13.0
   */
  cancelButton: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),

  /**
   * Buttons except "cancel" button
   * @since 0.0.68
   */
  buttons: _propTypes.default.node,

  /**
   * Actions which will be shown in Dialog header
   * @since 1.2.0
   */
  actions: _propTypes.default.node,

  /**
   * Wraps children into [Form](#!/Form) if not empty.
   * @since 0.0.68
   */
  form: _propTypes.default.object,

  /**
   * Dialog width
   * @since 0.0.68
   */
  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),

  /**
   * If the value is false, the dialog cannot be closed and the Close button is hidden.
   * @since 1.2.0
   */
  closable: _propTypes.default.bool,

  /**
   * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
   * @since 0.0.68
   */
  onClose: _propTypes.default.func,

  /**
   * Whether show or not a confirmation dialog on close.
   * @since 3.21.0
   */
  closingConfirmation: _propTypes.default.bool,

  /**
   * Content of the `DialogWindow`.
   * @since 0.0.68
   */
  children: _propTypes.default.node,

  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * @ignore
   */
  baseClassName: _propTypes.default.string
};
Dialog.defaultProps = {
  isOpen: false,
  banner: undefined,
  sideBanner: undefined,
  sideBannerContainer: undefined,
  image: undefined,
  title: undefined,
  subtitle: undefined,
  cancelTitle: undefined,
  cancelButton: undefined,
  buttons: undefined,
  actions: undefined,
  form: undefined,
  size: 'md',
  closable: true,
  onClose: undefined,
  closingConfirmation: undefined,
  children: undefined,
  className: undefined,
  baseClassName: "".concat(_constants.CLS_PREFIX, "dialog")
};
var _default = Dialog;
exports.default = _default;