"use strict";

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 _Header = _interopRequireDefault(require("./Header"));

var _ScrollDirection = _interopRequireDefault(require("./ScrollDirection"));

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

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

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

var _ScrollableElementFormContext = _interopRequireDefault(require("../Form/ScrollableElementFormContext"));

var _DrawerProgress = _interopRequireDefault(require("./DrawerProgress"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
const propTypes = {
  /**
   * Toggles visibility.
   * @since 0.0.65
   */
  isOpen: _propTypes.default.bool,

  /**
   * The title of the `Drawer`.
   * @since 0.0.65
   */
  title: _propTypes.default.node.isRequired,

  /**
   * The subtitle of the `Drawer`.
   * @since 0.0.65
   */
  subtitle: _propTypes.default.node,

  /**
   * Show the minimize button and the inactive close button.
   * @since 1.4.1
   */
  hideButton: _propTypes.default.bool,

  /**
   * Show back button in the header. If true the close button is not show.
   * @deprecated Not recommended to use. Use default close button instead.
   * @since 0.0.65
   */
  backButton: _propTypes.default.bool,

  /**
   * A slot for `Tabs` component.
   * @since 3.26.0
   */
  tabs: _propTypes.default.node,

  /**
   * Overlay placement.
   * @since 0.0.65
   */
  placement: _propTypes.default.oneOf(['left', 'right']),

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

  /**
   * onClose handler.
   * @since 0.0.65
   */
  onClose: _propTypes.default.func,

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

  /**
   * Wraps children into [Form](#!/Form) if not empty.
   * @since 0.0.66
   */
  form: _propTypes.default.oneOfType([_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'])
  }),

  /**
   * Content of the `Drawer`.
   * @since 0.0.65
   */
  children: _propTypes.default.node,

  /**
   * Adds [Progress](#!/Progress) into footer.
   * @since 1.11.0
   */
  progress: _propTypes.default.shape({
    /**
     * A title for the progress.
     */
    title: _propTypes.default.string,

    /**
     * An array of [ProgressStep](#!/ProgressStep) props.
     */
    steps: _propTypes.default.arrayOf(_propTypes.default.shape({
      title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
      status: _propTypes.default.string,
      progress: _propTypes.default.number,
      icon: _propTypes.default.string
    })).isRequired,

    /**
     * An option that controls drawer closing ability.
     */
    cancelable: _propTypes.default.bool,

    /**
     * On overall status event handler.
     * @since 3.8.0
     */
    onStatusChange: _propTypes.default.func,

    /**
     * @ignore
     */
    onClose: _propTypes.default.func,

    /**
     * @ignore
     */
    onClosableChange: _propTypes.default.func
  }),

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

  /**
   * @ignore
   */
  baseClassName: _propTypes.default.string
};
const defaultProps = {
  isOpen: false,
  subtitle: '',
  backButton: undefined,
  hideButton: undefined,
  tabs: undefined,
  placement: 'left',
  size: 'md',
  onClose: null,
  closingConfirmation: undefined,
  form: null,
  sideBanner: undefined,
  sideBannerContainer: undefined,
  progress: null,
  children: null,
  className: null,
  baseClassName: `${_constants.CLS_PREFIX}drawer`
};
/**
 * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
 * The component is similar to `Dialog` but it is intended to work with more complex forms or lists.
 * @since 0.0.65
 */

const Drawer = ({
  baseClassName,
  className,
  children,
  title,
  subtitle,
  backButton,
  hideButton,
  tabs,
  onClose,
  form,
  progress,
  closingConfirmation,
  ...props
}) => {
  const scrollableRef = (0, _react.useRef)();
  const [isClosable, setIsClosable] = (0, _react.useState)(true);
  const {
    onCloseWithConfirmation,
    closingConfirmationDialog
  } = (0, _ClosingConfirmation.useClosingConfirmation)({
    onClose,
    closingConfirmation
  });

  const takeApart = render => {
    if (progress) {
      progress.onClose = onCloseWithConfirmation;
      progress.onClosableChange = setIsClosable;

      const drawerProgressRender = ({
        content,
        footer
      }) => {
        return render({
          content: /*#__PURE__*/_react.default.createElement("div", {
            className: `${baseClassName}__form`
          }, content),
          footer
        });
      };

      return /*#__PURE__*/_react.default.createElement(_DrawerProgress.default, (0, _extends2.default)({
        render: drawerProgressRender
      }, progress));
    }

    if (form) {
      if ( /*#__PURE__*/(0, _react.isValidElement)(form)) {
        return /*#__PURE__*/(0, _react.cloneElement)(form, {
          className: (0, _classnames.default)(`${baseClassName}__form`, form.props.className),
          cancelButton: form.props.cancelButton === false ? false : {
            onClick: onCloseWithConfirmation,
            ...form.props.cancelButton
          },
          render: ({
            renderForm,
            renderActionButtons
          }) => render({
            content: renderForm(),
            footer: renderActionButtons()
          })
        });
      }

      if (typeof form === 'object') {
        form.className = (0, _classnames.default)(`${baseClassName}__form`, form.className);

        if (form.cancelButton !== false) {
          form.cancelButton = {
            onClick: onCloseWithConfirmation,
            ...form.cancelButton
          };
        }

        return /*#__PURE__*/_react.default.createElement(_Form.default, (0, _extends2.default)({}, form, {
          render: ({
            renderForm,
            renderActionButtons
          }) => render({
            content: renderForm(),
            footer: renderActionButtons()
          })
        }), children);
      }
    }

    return render({
      content: /*#__PURE__*/_react.default.createElement("div", {
        className: `${baseClassName}__inner-body`
      }, children)
    });
  };

  return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({
    className: (0, _classnames.default)(baseClassName, {
      [`${baseClassName}--form`]: form
    }, className),
    onClose: onCloseWithConfirmation,
    canCloseOnBackdropClick: true
  }, props), takeApart(({
    content,
    footer
  }) => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.default, {
    backButton: backButton,
    hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
    onClose: onCloseWithConfirmation,
    tabs: tabs
  }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
    level: "2",
    className: `${baseClassName}__title`
  }, title) : /*#__PURE__*/_react.default.createElement("div", {
    className: `${baseClassName}__title`
  }, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
    className: `${baseClassName}__subtitle`
  }, subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, ({
    handleScroll
  }) => /*#__PURE__*/_react.default.createElement("div", {
    className: `${baseClassName}__body`,
    onScroll: handleScroll,
    ref: scrollableRef
  }, /*#__PURE__*/_react.default.createElement(_ScrollableElementFormContext.default.Provider, {
    value: scrollableRef.current
  }, content))), footer && /*#__PURE__*/_react.default.createElement("footer", {
    className: `${baseClassName}__footer`
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${baseClassName}__footer-inner`
  }, footer)))), closingConfirmationDialog);
};

Drawer.propTypes = propTypes;
Drawer.defaultProps = defaultProps;
var _default = Drawer;
exports.default = _default;