import React from 'react';
import classNames from 'classnames';
import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons/faEllipsisVertical';
import { DROPDOWN_MENU_PLACEMENT_TYPES } from '../dropdown-menu';
import { AdaptiveList } from '../adaptive-list';
import { useTranslation } from '../hooks/use-translation';
import { withIconSidebarItem } from './with-icon-sidebar-item';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export let ICON_SIDEBAR_POSITION = /*#__PURE__*/function (ICON_SIDEBAR_POSITION) {
  ICON_SIDEBAR_POSITION["LEFT"] = "left";
  ICON_SIDEBAR_POSITION["RIGHT"] = "right";
  return ICON_SIDEBAR_POSITION;
}({});
/**
 * @midnight-gray-supported
 * @uxr-only-supported
 * @alpine-light-supported
 */
function IconSidebar({
  className,
  options,
  selected,
  onSelect,
  footerOption,
  position = ICON_SIDEBAR_POSITION.LEFT,
  moreButtonText,
  LinkComponent
}) {
  const {
    t
  } = useTranslation();
  const ItemComponent = withIconSidebarItem(LinkComponent);
  return /*#__PURE__*/_jsxs("div", {
    className: classNames('icon-sidebar-container', className, position),
    children: [/*#__PURE__*/_jsx("div", {
      className: "icon-sidebar-main-container",
      children: /*#__PURE__*/_jsx(AdaptiveList, {
        selected: selected,
        onSelect: onSelect,
        Component: ItemComponent,
        target: "offsetHeight",
        triggerOffset: 62,
        options: options,
        dropdownMenuProps: {
          triggerIsIcon: false,
          placement: position === ICON_SIDEBAR_POSITION.LEFT ? DROPDOWN_MENU_PLACEMENT_TYPES.RIGHT_START : DROPDOWN_MENU_PLACEMENT_TYPES.LEFT_START,
          triggerDynamicContent: ({
            isOpen
          }) => /*#__PURE__*/_jsx(ItemComponent, {
            option: {
              key: 'more-trigger',
              title: moreButtonText ?? t('More'),
              icon: faEllipsisVertical
            },
            selected: isOpen ? 'more-trigger' : undefined
          })
        }
      })
    }), footerOption && /*#__PURE__*/_jsx("div", {
      className: "icon-sidebar-footer-container",
      children: /*#__PURE__*/_jsx(ItemComponent, {
        option: footerOption,
        onSelect: onSelect,
        selected: selected
      })
    })]
  });
}
export default IconSidebar;