import React, { useMemo, forwardRef } from 'react';
import classNames from 'classnames';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
import { useResize } from './useResize';
import { useTranslation } from '../hooks/use-translation';
import { useForwardRef } from '../hooks/use-forward-ref';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { Button, ACCENT_TYPES } from '../button';
import { Tooltip, TOOLTIP_DELAY_TYPES, TOOLTIP_PLACEMENT_TYPES } from '../tooltip';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const TOGGLE_BUTTON_PLACEMENTS = {
  left: 'left',
  right: 'right'
};
const CHEVRON_CLASSNAME_TABLE = {
  [TOGGLE_BUTTON_PLACEMENTS.left]: {
    true: faChevronLeft,
    false: faChevronRight
  },
  [TOGGLE_BUTTON_PLACEMENTS.right]: {
    true: faChevronRight,
    false: faChevronLeft
  }
};
/**
 * Use card block to display data helps users quickly locate and browse data.
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
const CollapsibleSidebar = /*#__PURE__*/forwardRef(function CollapsibleSidebar({
  children,
  sidebarClassName,
  isMinimized = false,
  onToggleMinimized = () => {},
  sidebarMinimizedClassName,
  testId,
  toggleButtonTestId,
  toggleButtonClassName,
  toggleButtonPlacement = TOGGLE_BUTTON_PLACEMENTS.right,
  disableToggleMinimization,
  activeMinimize,
  sidebarName,
  isResizeEnabled = false,
  width,
  onWidthChange,
  maxWidth,
  minWidth = 'max(16%, 230px)',
  openTooltipText,
  closeTooltipText,
  resizeTooltipText
}, ref) {
  const [setPanelRef, panelRef] = useForwardRef(ref);
  const {
    t
  } = useTranslation();
  const openTooltipTextValue = openTooltipText ?? t('click to open');
  const closeTooltipTextValue = closeTooltipText ?? t('click to close');
  const resizeTooltipTextValue = resizeTooltipText ?? t('drag to resize');
  const {
    isResizing,
    shouldRespondToBorderClick,
    onMouseDownHandler
  } = useResize({
    panelElement: panelRef,
    onWidthChange,
    sideBarPlacement: toggleButtonPlacement,
    isResizeEnabled,
    isMinimized
  });
  const chevronIcon = CHEVRON_CLASSNAME_TABLE[toggleButtonPlacement][isMinimized ? 'true' : 'false'];
  const onToggleButtonClick = () => onToggleMinimized(!isMinimized);
  const onToggleBorderLineClick = () => {
    // we do not need to toggle sidebar if click event happened after resizing
    // (otherwise everytime user does resizing - it would trigger sidebar toggle)
    if (shouldRespondToBorderClick) {
      onToggleMinimized(!isMinimized);
    }
  };
  const tooltipText = useMemo(() => {
    const usualText = isMinimized ? openTooltipTextValue : closeTooltipTextValue;
    const resizeText = isResizeEnabled && !isMinimized ? resizeTooltipTextValue : '';
    return /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx("p", {
        style: {
          display: 'inline'
        },
        children: usualText
      }), /*#__PURE__*/_jsx("p", {
        children: resizeText
      })]
    });
  }, [isMinimized, isResizeEnabled]);
  return (
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
    _jsxs("div", {
      className: classNames('collapsible-sidebar-container', sidebarClassName, activeMinimize && 'active-minimize', isMinimized && ['minimized', sidebarMinimizedClassName], !isResizing && 'transition-enabled'),
      "test-id": testId
      /* eslint-disable-next-line react/forbid-dom-props */,
      style: {
        width: isMinimized ? undefined : width,
        minWidth: isMinimized ? undefined : minWidth,
        maxWidth: isMinimized ? undefined : maxWidth
      },
      onClick: activeMinimize && isMinimized ? onToggleButtonClick : undefined,
      ref: setPanelRef,
      children: [children, !disableToggleMinimization && /*#__PURE__*/_jsxs("div", {
        className: classNames('collapsible-sidebar-buttons-wrapper', isResizing && 'resizing'),
        children: [/*#__PURE__*/_jsx(Button, {
          accentType: ACCENT_TYPES.COMMAND,
          className: classNames('toggle-sidebar', toggleButtonClassName, toggleButtonPlacement),
          onClick: onToggleButtonClick,
          testId: toggleButtonTestId,
          "aria-label": sidebarName ?? t('Sidebar'),
          "aria-expanded": !isMinimized,
          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
            icon: chevronIcon,
            className: toggleButtonPlacement
          })
        }), /*#__PURE__*/_jsx(Tooltip, {
          content: tooltipText,
          placement: toggleButtonPlacement === TOGGLE_BUTTON_PLACEMENTS.right ? TOOLTIP_PLACEMENT_TYPES.RIGHT : TOOLTIP_PLACEMENT_TYPES.LEFT,
          delayType: TOOLTIP_DELAY_TYPES.SLOW,
          children: /*#__PURE__*/_jsx("div", {
            onClick: onToggleBorderLineClick,
            className: classNames('toggle-sidebar-border-panel', isResizeEnabled && !isMinimized && 'is-resizable', toggleButtonPlacement),
            onMouseDown: onMouseDownHandler
          })
        })]
      })]
    })
  );
});
export default CollapsibleSidebar;