// Copyright 1999-2025. WebPros International GmbH. All rights reserved.

import { createRef, useState, useRef } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import classNames from 'classnames';
import Button from '../Button';
import Toast from '../Toast';
import OnDarkContext from '../OnDarkContext';
import GroupLabel from './GroupLabel';
import { getGroups } from './getGroups';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const PanelView = _ref => {
  let {
    toasts,
    onToastClose,
    onToastGroupClose,
    baseClassName,
    groupConfigs,
    isCollapsed: externalIsCollapsed,
    onCollapseStateChange
  } = _ref;
  const groups = getGroups({
    toasts,
    groupConfigs
  });
  const notEmptyGroups = groups.filter(_ref2 => {
    let {
      count
    } = _ref2;
    return count > 0;
  });
  const panelRef = useRef(null);
  const headerRef = useRef(null);
  const isCollapsed = externalIsCollapsed ?? false;
  const [isHeaderVisible, setIsHeaderVisible] = 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__*/_jsx(CSSTransition, {
    nodeRef: headerRef,
    in: isHeaderVisible,
    timeout: {
      enter: isSingleNonClosableToast ? 600 : 300,
      exit: 300
    },
    classNames: `${baseClassName}__header`,
    unmountOnExit: true,
    children: /*#__PURE__*/_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__*/_jsx("div", {
        className: `${baseClassName}__header-labels`,
        children: notEmptyGroups.map(group => /*#__PURE__*/_jsx(GroupLabel, {
          group: group,
          onClose: () => onToastGroupClose?.(group.keys)
        }, group.groupKey))
      }), /*#__PURE__*/_jsx(Button, {
        ghost: true,
        icon: isCollapsed ? 'chevron-up' : 'chevron-down',
        onClick: () => onCollapseStateChange?.(!isCollapsed),
        className: `${baseClassName}__header-collapse`,
        "aria-label": "Collapse"
      })]
    })
  });
  const panelContent = /*#__PURE__*/_jsx("div", {
    className: classNames(`${baseClassName}__content-wrapper`, {
      [`${baseClassName}__content-wrapper--collapsed`]: isCollapsed
    }),
    style: {
      '--_pul-toaster--panel-content-enter-delay': isSingleToast || isEmpty ? '300ms' : undefined
    },
    children: /*#__PURE__*/_jsx(TransitionGroup, {
      component: "div",
      className: `${baseClassName}__content`,
      children: toasts.map(_ref3 => {
        let {
          key,
          ...toastProps
        } = _ref3;
        const toastRef = /*#__PURE__*/createRef();
        const toastClassName = `${baseClassName}__toast`;
        return /*#__PURE__*/_jsx(CSSTransition, {
          classNames: `${toastClassName}__wrapper`,
          timeout: {
            enter: 30000,
            exit: 300
          },
          nodeRef: toastRef,
          enter: toasts.length > 1,
          children: /*#__PURE__*/_jsx("div", {
            className: `${toastClassName}__wrapper`,
            ref: toastRef,
            children: /*#__PURE__*/_jsx("div", {
              className: `${toastClassName}__sub-wrapper`,
              children: /*#__PURE__*/_jsx(Toast, {
                ...toastProps,
                onClose: () => {
                  onToastClose({
                    key,
                    ...toastProps
                  });
                },
                className: classNames(toastProps.className, toastClassName, isSingleNonClosableToast && `${toastClassName}--with-collapse`),
                message: /*#__PURE__*/_jsxs(_Fragment, {
                  children: [toastProps.message, isSingleNonClosableToast && !isHeaderVisible && /*#__PURE__*/_jsx(Button, {
                    size: "md",
                    ghost: true,
                    icon: {
                      name: 'chevron-down'
                    },
                    className: `${baseClassName}__toast-collapse`,
                    onClick: handleToastCollapse,
                    "aria-label": "Collapse"
                  })]
                })
              }, key)
            })
          })
        }, key);
      })
    })
  });
  return /*#__PURE__*/_jsx(OnDarkContext.Provider, {
    value: true,
    children: /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__wrapper`,
      children: /*#__PURE__*/_jsx(CSSTransition, {
        nodeRef: panelRef,
        in: toasts.length > 0,
        timeout: {
          enter: 300,
          exit: 300
        },
        classNames: baseClassName,
        unmountOnExit: true,
        children: /*#__PURE__*/_jsxs("div", {
          ref: panelRef,
          className: classNames(baseClassName, {
            [`${baseClassName}--empty`]: isEmpty
          }),
          children: [panelHeader, panelContent]
        })
      })
    })
  });
};
export default PanelView;