"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("../../constants");
var _Overlay = _interopRequireDefault(require("../Overlay"));
var _ClosingConfirmation = require("../ClosingConfirmation");
var _Header = _interopRequireDefault(require("./Header"));
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"));
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

const defaultProps = {
  isOpen: false,
  subtitle: undefined,
  backButton: undefined,
  hideButton: undefined,
  tabs: undefined,
  placement: 'left',
  size: 'md',
  onClose: undefined,
  closingConfirmation: undefined,
  form: undefined,
  sideBanner: undefined,
  sideBannerContainer: undefined,
  progress: undefined,
  children: null,
  className: undefined,
  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.
 * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
 * @since 0.0.65
 */
const Drawer = _ref => {
  let {
    baseClassName,
    className,
    children,
    title,
    subtitle,
    backButton,
    hideButton,
    tabs,
    onClose,
    form,
    progress,
    closingConfirmation,
    ...props
  } = _ref;
  const scrollableRef = (0, _react.useRef)(null);
  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 = _ref2 => {
        let {
          content,
          footer
        } = _ref2;
        return render({
          content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: `${baseClassName}__form`,
            children: content
          }),
          footer
        });
      };
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerProgress.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,
            ...(typeof form.props.cancelButton === 'object' && form.props.cancelButton)
          },
          render: _ref3 => {
            let {
              renderForm,
              renderActionButtons
            } = _ref3;
            return 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,
            ...(typeof form.cancelButton === 'object' && form.cancelButton)
          };
        }
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.default, {
          ...form,
          render: _ref4 => {
            let {
              renderForm,
              renderActionButtons
            } = _ref4;
            return render({
              content: renderForm(),
              footer: renderActionButtons()
            });
          },
          children: children
        });
      }
    }
    return render({
      content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${baseClassName}__inner-body`,
        children: children
      })
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Overlay.default, {
    className: (0, _classnames.default)(baseClassName, {
      [`${baseClassName}--form`]: form
    }, className),
    onClose: onCloseWithConfirmation,
    canCloseOnBackdropClick: true,
    ...props,
    children: [takeApart(_ref5 => {
      let {
        content,
        footer
      } = _ref5;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Header.default, {
          backButton: backButton,
          hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
          onClose: onCloseWithConfirmation,
          tabs: tabs,
          children: [(0, _Translate.isLikeText)(title) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.default, {
            level: 2,
            className: `${baseClassName}__title`,
            children: title
          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: `${baseClassName}__title`,
            children: title
          }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: `${baseClassName}__subtitle`,
            children: subtitle
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: `${baseClassName}__body`,
          ref: scrollableRef,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollableElementFormContext.default.Provider, {
            value: scrollableRef.current,
            children: content
          })
        }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
          className: `${baseClassName}__footer`,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: `${baseClassName}__footer-inner`,
            children: footer
          })
        })]
      });
    }), closingConfirmationDialog]
  });
};
Drawer.defaultProps = defaultProps;
var _default = exports.default = Drawer;