import { h } from "@stencil/core";
import { ElementIDUtils } from '@sankhyalabs/core';
export const BreadcrumbItem = (props) => {
  const { items, selectedItem, itemsHidden, showDropdown, handleShowDropdown, collapseConfigPosition, ellipsesPositionedEnd } = props;
  const formatDropdownItems = () => {
    return itemsHidden.map((item) => (Object.assign(Object.assign({}, item), { type: 'item', children: null, iconName: item.iconName || null, subAction: null, group: null })));
  };
  const onClickEllipsis = (evt) => {
    evt.stopPropagation();
    handleShowDropdown(!showDropdown);
  };
  const createEllipsis = (item) => {
    return (h("li", Object.assign({ class: "breadcrumb__item", onClick: evt => onClickEllipsis(evt) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumbItem_ellipsis`) }), ellipsesPositionedEnd && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })), h("span", { class: "ellipses__item" }, "..."), ellipsesPositionedEnd || h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` })), showDropdown &&
      h("ez-dropdown", Object.assign({ class: "dropdown-ellipsis", items: formatDropdownItems(), onEzClick: (evt) => selectedItem.emit(evt.detail) }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo("dropdown")}` }))));
  };
  return (h("div", { class: "breadcrumb__items" }, items.map((item, index) => {
    const isLastItem = index === (items.length - 1);
    return (h("div", { class: "breadcrumb__group" }, collapseConfigPosition === index && createEllipsis(item), h("li", Object.assign({ class: "breadcrumb__item", id: item.id }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`ezBreadcrumb_item_${item.id}_${item.label}`) }), item.iconName && h("ez-icon", Object.assign({ class: `breadcrumb__item--icon ${(isLastItem && !ellipsesPositionedEnd) ? 'active-icon' : ''}`, size: "small", iconName: item.iconName }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconItem${item.id}`)}` })), h("p", { class: `breadcrumb__item--label ${(isLastItem && !ellipsesPositionedEnd) ? 'active' : ''}`, onClick: (ellipsesPositionedEnd || !isLastItem) ? () => selectedItem.emit(item) : undefined }, item.label), !isLastItem && h("ez-icon", Object.assign({ class: "breadcrumb__item--chevron", size: "small", iconName: "chevron-right" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: `${ElementIDUtils.getInternalIDInfo(`iconPath${item.id}`)}` }))), (collapseConfigPosition - 1 === index && ellipsesPositionedEnd) && createEllipsis(item)));
  })));
};
