import React, { createElement as _createElement } from 'react';
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
import { BreadcrumbLinkComponent } from './breadcrumb-link-component';
import { BreadcrumbsItem } from './breadcrumbs-item';
import { DropdownMenu } from '../dropdown-menu';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const TruncatedBreadcrumbs = ({
  crumbs,
  shouldRenderIconBack,
  LinkComponent = BreadcrumbLinkComponent,
  showItemsInBreadcrumbs
}) => {
  const firstItem = crumbs[0];
  const lastItemsCount = showItemsInBreadcrumbs - 1;
  const middleSetOfCrumbs = crumbs.slice(1, crumbs.length - lastItemsCount);
  const lastCrumbs = lastItemsCount > 0 ? crumbs.slice(-lastItemsCount) : [];
  const indexOfCrumb = crumb => crumbs.indexOf(crumb);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_createElement(BreadcrumbsItem, {
      ...firstItem,
      key: indexOfCrumb(firstItem),
      index: indexOfCrumb(firstItem),
      shouldRenderIconBack: shouldRenderIconBack,
      LinkComponent: LinkComponent
    }), middleSetOfCrumbs.length > 0 && /*#__PURE__*/_jsx("li", {
      className: "breadcrumbs breadcrumb-item",
      children: /*#__PURE__*/_jsx(DropdownMenu, {
        contentTestId: "truncated-breadcrumbs",
        triggerClassName: "breadcrumb-item breadcrumb-item-truncated",
        triggerHideChevron: true,
        triggerAriaLabelText: "...",
        triggerDynamicContent: () => /*#__PURE__*/_jsx(FontAwesomeIcon, {
          icon: faEllipsisH,
          "test-id": "breadcrumbs-ellipsis-icon-test-id"
        }),
        options: middleSetOfCrumbs.map(item => ({
          title: /*#__PURE__*/_jsx("div", {
            className: "drop-item",
            children: /*#__PURE__*/_jsx("span", {
              "test-id": `crumb-${indexOfCrumb(item)}`,
              children: item.label
            })
          }),
          key: indexOfCrumb(item)
        })),
        onSelect: ({
          key
        }) => {
          const selectedCrumb = crumbs[Number(key)];
          if (typeof selectedCrumb.click === 'function') {
            selectedCrumb.click({
              preventDefault: () => {},
              stopPropagation: () => {}
            });
            return;
          }
          const link = selectedCrumb.link;
          if (link) {
            window.location.href = link;
          }
        }
      })
    }), lastCrumbs.map(item => /*#__PURE__*/_createElement(BreadcrumbsItem, {
      ...item,
      key: indexOfCrumb(item),
      index: indexOfCrumb(item),
      shouldRenderIconBack: shouldRenderIconBack,
      LinkComponent: LinkComponent
    }))]
  });
};