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

import { Fragment, isValidElement, cloneElement, useRef, useState } from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import Overlay from '../Overlay';
import { useClosingConfirmation } from '../ClosingConfirmation';
import Header from './Header';
import Form from '../Form';
import Heading from '../Heading';
import { isLikeText } from '../Translate';
import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
import DrawerProgress from './DrawerProgress';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
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: `${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 = useRef(null);
  const [isClosable, setIsClosable] = useState(true);
  const {
    onCloseWithConfirmation,
    closingConfirmationDialog
  } = 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__*/_jsx("div", {
            className: `${baseClassName}__form`,
            children: content
          }),
          footer
        });
      };
      return /*#__PURE__*/_jsx(DrawerProgress, {
        render: drawerProgressRender,
        ...progress
      });
    }
    if (form) {
      if ( /*#__PURE__*/isValidElement(form)) {
        return /*#__PURE__*/cloneElement(form, {
          className: classNames(`${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 = classNames(`${baseClassName}__form`, form.className);
        if (form.cancelButton !== false) {
          form.cancelButton = {
            onClick: onCloseWithConfirmation,
            ...(typeof form.cancelButton === 'object' && form.cancelButton)
          };
        }
        return /*#__PURE__*/_jsx(Form, {
          ...form,
          render: _ref4 => {
            let {
              renderForm,
              renderActionButtons
            } = _ref4;
            return render({
              content: renderForm(),
              footer: renderActionButtons()
            });
          },
          children: children
        });
      }
    }
    return render({
      content: /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__inner-body`,
        children: children
      })
    });
  };
  return /*#__PURE__*/_jsxs(Overlay, {
    className: classNames(baseClassName, {
      [`${baseClassName}--form`]: form
    }, className),
    onClose: onCloseWithConfirmation,
    canCloseOnBackdropClick: true,
    ...props,
    children: [takeApart(_ref5 => {
      let {
        content,
        footer
      } = _ref5;
      return /*#__PURE__*/_jsxs(Fragment, {
        children: [/*#__PURE__*/_jsxs(Header, {
          backButton: backButton,
          hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
          onClose: onCloseWithConfirmation,
          tabs: tabs,
          children: [isLikeText(title) ? /*#__PURE__*/_jsx(Heading, {
            level: 2,
            className: `${baseClassName}__title`,
            children: title
          }) : /*#__PURE__*/_jsx("div", {
            className: `${baseClassName}__title`,
            children: title
          }), subtitle && /*#__PURE__*/_jsx("div", {
            className: `${baseClassName}__subtitle`,
            children: subtitle
          })]
        }), /*#__PURE__*/_jsx("div", {
          className: `${baseClassName}__body`,
          ref: scrollableRef,
          children: /*#__PURE__*/_jsx(ScrollableElementFormContext.Provider, {
            value: scrollableRef.current,
            children: content
          })
        }), footer && /*#__PURE__*/_jsx("footer", {
          className: `${baseClassName}__footer`,
          children: /*#__PURE__*/_jsx("div", {
            className: `${baseClassName}__footer-inner`,
            children: footer
          })
        })]
      });
    }), closingConfirmationDialog]
  });
};
Drawer.defaultProps = defaultProps;
export default Drawer;