"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactTransitionGroup = require("react-transition-group");
var _classnames = _interopRequireDefault(require("classnames"));
var _Button = _interopRequireDefault(require("../Button"));
var _Toast = _interopRequireDefault(require("../Toast"));
var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
var _GroupLabel = _interopRequireDefault(require("./GroupLabel"));
var _getGroups = require("./getGroups");
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

const PanelView = _ref => {
  let {
    toasts,
    onToastClose,
    onToastGroupClose,
    baseClassName,
    groupConfigs,
    isCollapsed: externalIsCollapsed,
    onCollapseStateChange
  } = _ref;
  const groups = (0, _getGroups.getGroups)({
    toasts,
    groupConfigs
  });
  const notEmptyGroups = groups.filter(_ref2 => {
    let {
      count
    } = _ref2;
    return count > 0;
  });
  const panelRef = (0, _react.useRef)(null);
  const headerRef = (0, _react.useRef)(null);
  const isCollapsed = externalIsCollapsed ?? false;
  const [isHeaderVisible, setIsHeaderVisible] = (0, _react.useState)(toasts.length > 1 || isCollapsed);
  const isEmpty = toasts.length === 0;
  const isSingleToast = toasts.length === 1;
  const isSingleNonClosableToast = toasts.length === 1 && !(toasts[0].closable ?? true);
  const handleToastCollapse = () => {
    onCollapseStateChange?.(true);
    setIsHeaderVisible(true);
  };
  if (toasts.length > 1 && !isHeaderVisible) {
    setIsHeaderVisible(true);
  }
  if (isSingleToast && !isCollapsed && isHeaderVisible) {
    setIsHeaderVisible(false);
  }
  if (isEmpty && isHeaderVisible) {
    setIsHeaderVisible(false);
  }
  if (isEmpty && isCollapsed) {
    onCollapseStateChange?.(false);
  }
  const panelHeader = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
    nodeRef: headerRef,
    in: isHeaderVisible,
    timeout: {
      enter: isSingleNonClosableToast ? 600 : 300,
      exit: 300
    },
    classNames: `${baseClassName}__header`,
    unmountOnExit: true,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      ref: headerRef,
      className: `${baseClassName}__header`,
      style: {
        '--_pul-toaster--panel-header-enter-delay': isSingleNonClosableToast ? '300ms' : 0,
        '--_pul-toaster--panel-header-exit-delay': isEmpty ? '300ms' : undefined
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${baseClassName}__header-labels`,
        children: notEmptyGroups.map(group => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupLabel.default, {
          group: group,
          onClose: () => onToastGroupClose?.(group.keys)
        }, group.groupKey))
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        ghost: true,
        icon: isCollapsed ? 'chevron-up' : 'chevron-down',
        onClick: () => onCollapseStateChange?.(!isCollapsed),
        className: `${baseClassName}__header-collapse`,
        "aria-label": "Collapse"
      })]
    })
  });
  const panelContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: (0, _classnames.default)(`${baseClassName}__content-wrapper`, {
      [`${baseClassName}__content-wrapper--collapsed`]: isCollapsed
    }),
    style: {
      '--_pul-toaster--panel-content-enter-delay': isSingleToast || isEmpty ? '300ms' : undefined
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
      component: "div",
      className: `${baseClassName}__content`,
      children: toasts.map(_ref3 => {
        let {
          key,
          ...toastProps
        } = _ref3;
        const toastRef = /*#__PURE__*/(0, _react.createRef)();
        const toastClassName = `${baseClassName}__toast`;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
          classNames: `${toastClassName}__wrapper`,
          timeout: {
            enter: 30000,
            exit: 300
          },
          nodeRef: toastRef,
          enter: toasts.length > 1,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: `${toastClassName}__wrapper`,
            ref: toastRef,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: `${toastClassName}__sub-wrapper`,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
                ...toastProps,
                onClose: () => {
                  onToastClose({
                    key,
                    ...toastProps
                  });
                },
                className: (0, _classnames.default)(toastProps.className, toastClassName, isSingleNonClosableToast && `${toastClassName}--with-collapse`),
                message: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                  children: [toastProps.message, isSingleNonClosableToast && !isHeaderVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
                    size: "md",
                    ghost: true,
                    icon: {
                      name: 'chevron-down'
                    },
                    className: `${baseClassName}__toast-collapse`,
                    onClick: handleToastCollapse,
                    "aria-label": "Collapse"
                  })]
                })
              }, key)
            })
          })
        }, key);
      })
    })
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnDarkContext.default.Provider, {
    value: true,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__wrapper`,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
        nodeRef: panelRef,
        in: toasts.length > 0,
        timeout: {
          enter: 300,
          exit: 300
        },
        classNames: baseClassName,
        unmountOnExit: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          ref: panelRef,
          className: (0, _classnames.default)(baseClassName, {
            [`${baseClassName}--empty`]: isEmpty
          }),
          children: [panelHeader, panelContent]
        })
      })
    })
  });
};
var _default = exports.default = PanelView;