import { h, r as registerInstance, c as createEvent, g as getElement } from './index-baa5e267.js';
import { ElementIDUtils, ObjectUtils, JSUtils } from '@sankhyalabs/core';

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)));
  })));
};

const ezBreadcrumbCss = ":host{--breadcrumb__item--label--color--title-primary:var(--color--title-primary, #2B3A54);--breadcrumb__item--label--color--active:var(--color--primary, '#008561');--breadcrumb__item--label--font-weight:var(--text-weight--large, 600);display:block;font-size:var(--text--medium, 14px);font-family:var(--font-pattern, \"Roboto\");font-weight:var(--text-weight--medium, 400)}.breadcrumb{display:flex}.breadcrumb__group{display:flex}.breadcrumb__list{list-style-type:none;display:inline-block;margin:0;padding:0;overflow:hidden;white-space:nowrap}.breadcrumb__item{display:inline-flex;align-items:center;cursor:pointer}.breadcrumb__item--label{color:var(--breadcrumb__item--label--color--title-primary);margin:0px}.breadcrumb__item--icon{padding-right:3px;color:var(--breadcrumb__item--label--color--title-primary)}.breadcrumb__item--chevron{padding:0px 6px;cursor:default}.active{color:var(--breadcrumb__item--label--color--active);font-weight:var(--breadcrumb__item--label--font-weight);cursor:default}.active-icon{--icon--color:var(--breadcrumb__item--label--color--active);cursor:default}.breadcrumb__items{display:flex}";

const EzBreadcrumb = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.selectedItem = createEvent(this, "selectedItem", 7);
    this._ellipsesPositionedEnd = false;
    this._renderSecond = false;
    this.INDEX_ITEM_TO_REMOVE = 1; // sempre removemos o segundo item.
    this.CHEVRON_SIZE = 28;
    this.handleShowDropdown = (newState) => {
      this.showDropdown = newState;
    };
    this.items = [];
    this.fillMode = "auto";
    this.maxItems = 4;
    this.positionEllipsis = 1;
    this.visibleItems = undefined;
    this.hiddenItems = [];
    this.showDropdown = false;
    this.collapseConfigPosition = -1;
  }
  watchPropHandler(newValue, oldValue) {
    if (ObjectUtils.objectToString(newValue || []) !== ObjectUtils.objectToString(oldValue || [])) {
      this.loadItems();
    }
    this.fillMode === "auto" && this.handleResize();
  }
  watchPropHiddenItems() {
    if (this.fillMode === 'auto') {
      this.collapseConfigPosition = this.hiddenItems.length > 0 ? 1 : -1;
    }
  }
  componentDidUpdate() {
    this.positionDropdown();
    this.setEvents();
  }
  componentWillLoad() {
    this.loadItems();
  }
  loadItems() {
    this.visibleItems = [...this.items];
    this.hiddenItems = [];
    if (this.fillMode === 'regular') {
      this.configModeRegular();
    }
    else if (this.fillMode === 'auto') {
      this.startResize();
    }
    this.setEvents();
  }
  closeDropdown(evt) {
    const target = evt === null || evt === void 0 ? void 0 : evt.target;
    if (target == undefined) {
      return;
    }
    if (target !== this._element.shadowRoot.querySelector(".ellipses__item")) {
      this.showDropdown = false;
    }
  }
  setEvents() {
    document.removeEventListener("click", this.closeDropdown.bind(this));
    document.addEventListener("click", this.closeDropdown.bind(this));
    document.removeEventListener("scroll", this.positionDropdown.bind(this));
    document.addEventListener("scroll", this.positionDropdown.bind(this));
  }
  componentDidLoad() {
    ElementIDUtils.addIDInfo(this._element);
  }
  componentDidRender() {
    if (this.fillMode === 'auto') {
      this.configResize();
    }
  }
  configResize() {
    if (this._resizeObserver != undefined) {
      this._resizeObserver.unobserve(this._element.parentElement);
    }
    this._resizeObserver = new ResizeObserver(JSUtils.debounce(this.handleResize.bind(this), 200));
    this._resizeObserver.observe(this._element.parentElement);
  }
  handleResize() {
    const ELLIPSIS_SIZE = 39;
    if (!this._renderSecond) {
      this._renderSecond = true;
      return;
    }
    if (this._element.parentElement == undefined) {
      return;
    }
    let { offsetWidth } = this._element.parentElement;
    let sumVisibleItems = 0;
    this.visibleItems.forEach(item => sumVisibleItems += item.width);
    //Se existe o ellipsis, devemos cconsidera-lo no calculo
    const offset = this.collapseConfigPosition > -1 ? ELLIPSIS_SIZE : 0;
    if (offsetWidth < sumVisibleItems + offset) {
      this.handleCollapse(offsetWidth, sumVisibleItems);
    }
    else if (offsetWidth >= sumVisibleItems + offset) {
      this.handleExpand(offsetWidth);
    }
  }
  handleCollapse(containerWidth, itemsWidth) {
    const MIN_VISIBLE_ITEMS = 2;
    if (this.visibleItems.length <= MIN_VISIBLE_ITEMS) {
      return;
    }
    let tmpVisibleItems = [...this.visibleItems];
    let tmpHiddenItems = [...this.hiddenItems];
    let secondItem = tmpVisibleItems[this.INDEX_ITEM_TO_REMOVE];
    let hasChange = false;
    while (tmpVisibleItems.length > MIN_VISIBLE_ITEMS &&
      secondItem != undefined &&
      itemsWidth > containerWidth) {
      hasChange = true;
      tmpVisibleItems = tmpVisibleItems.filter((_, index) => index !== this.INDEX_ITEM_TO_REMOVE);
      tmpHiddenItems = [...tmpHiddenItems, secondItem];
      itemsWidth -= secondItem.width;
      secondItem = tmpVisibleItems[this.INDEX_ITEM_TO_REMOVE];
    }
    if (hasChange) {
      this.visibleItems = tmpVisibleItems;
      this.hiddenItems = tmpHiddenItems;
      this.showDropdown = false;
    }
  }
  handleExpand(containerWidth) {
    if (!this.hiddenItems.length) {
      return;
    }
    let widthFreeZone = Math.abs(this._elBreadcrumbList.offsetWidth - containerWidth);
    let tmpVisibleItems = [...this.visibleItems];
    let tmpHiddenItems = [...this.hiddenItems];
    let lastHiddenElement = tmpHiddenItems[tmpHiddenItems.length - 1];
    let hasChange = false;
    while (lastHiddenElement && widthFreeZone >= lastHiddenElement.width) {
      widthFreeZone -= lastHiddenElement.width;
      tmpHiddenItems.pop();
      tmpVisibleItems.splice(this.INDEX_ITEM_TO_REMOVE, 0, lastHiddenElement);
      lastHiddenElement = tmpHiddenItems[tmpHiddenItems.length - 1];
      hasChange = true;
    }
    if (hasChange) {
      this.visibleItems = tmpVisibleItems;
      this.hiddenItems = tmpHiddenItems;
      this.showDropdown = false;
    }
  }
  configModeRegular() {
    if (this.visibleItems.length > this.maxItems) {
      const amountsItemsToHide = Math.abs(this.visibleItems.length - this.maxItems);
      if (this.positionEllipsis === 0) {
        const itemsToTransfer = this.visibleItems.slice(0, amountsItemsToHide);
        this.hiddenItems.push(...itemsToTransfer);
        this.visibleItems.splice(0, amountsItemsToHide);
      }
      else if (this.positionEllipsis >= this.maxItems) {
        const itemsToTransfer = this.visibleItems.slice(this.maxItems);
        this.hiddenItems.push(...itemsToTransfer);
        this.visibleItems.splice(this.maxItems);
        this._ellipsesPositionedEnd = true;
      }
      else {
        const removedItems = this.visibleItems.splice(this.positionEllipsis, amountsItemsToHide);
        this.hiddenItems.push(...removedItems);
      }
      this.collapseConfigPosition = this.positionEllipsis;
    }
  }
  positionDropdown() {
    var _a;
    const bounding = (_a = this._element.shadowRoot.querySelector(".ellipses__item")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
    const elDropdown = this._element.shadowRoot.querySelector(".dropdown-ellipsis");
    if (bounding == undefined || elDropdown == undefined) {
      return;
    }
    elDropdown.style.top = (bounding.y + bounding.height + 5) + "px";
    elDropdown.style.left = bounding.x + "px";
  }
  ;
  async startResize() {
    const areaAvailable = this._element.parentElement.offsetWidth;
    const ELLIPSIS_SIZE = 10;
    const measureItemSize = async (item, index) => {
      item.width = await this.measureSizeHTMLElement(item);
      /*
        Se é o ultimo item, desconsideramos o icone CHEVRON
      */
      if (index === this.visibleItems.length - 1) {
        item.width -= this.CHEVRON_SIZE;
      }
      return item;
    };
    const measuredItems = await Promise.all(this.visibleItems.map(measureItemSize));
    const sizeBreadcrumb = measuredItems.reduce((total, item) => total + item.width, 0);
    if (sizeBreadcrumb > areaAvailable) {
      const tempItemsVisible = [];
      const tempItemsHidden = [...measuredItems];
      const firstItem = tempItemsHidden.shift();
      const lastItem = tempItemsHidden.pop();
      lastItem.width += ELLIPSIS_SIZE;
      tempItemsVisible.push(firstItem, lastItem);
      let sizeTempItemsHiddenResult = tempItemsVisible.reduce((total, item) => total + item.width, 0);
      let newAreaAvailable = Math.abs(sizeTempItemsHiddenResult - areaAvailable);
      tempItemsHidden.reverse().forEach((item) => {
        if (item.width < newAreaAvailable) {
          const firstItemForListHidden = tempItemsHidden.shift();
          tempItemsVisible.splice(1, 0, firstItemForListHidden);
          sizeTempItemsHiddenResult = tempItemsVisible.reduce((total, item) => total + item.width, 0);
          newAreaAvailable = Math.abs(sizeTempItemsHiddenResult - areaAvailable);
        }
      });
      this.visibleItems = [...tempItemsVisible];
      this.hiddenItems = [...tempItemsHidden.reverse()];
    }
  }
  measureSizeHTMLElement(item) {
    return new Promise((resolve) => {
      const ICON_SIZE = 19;
      this.waitFontLoad().then(() => {
        if (this._textMesurement === undefined) {
          this._textMesurement = this._element.shadowRoot.ownerDocument.createElement("canvas");
        }
        const context = this._textMesurement.getContext("2d");
        context.font = "14px Roboto, Algerian";
        resolve((item.iconName ? ICON_SIZE : 0) + this.CHEVRON_SIZE + context.measureText(item.label).width);
      });
    });
  }
  waitFontLoad() {
    return new Promise((resolve) => {
      document.fonts.load("14px Roboto").then(() => resolve(), resolve());
    });
  }
  getItemContent() {
    return (h("nav", { class: "breadcrumb" }, h("ol", { class: "breadcrumb__list", ref: elem => this._elBreadcrumbList = elem }, h(BreadcrumbItem, { items: this.visibleItems, selectedItem: this.selectedItem, itemsHidden: this.hiddenItems, showDropdown: this.showDropdown, handleShowDropdown: this.handleShowDropdown, collapseConfigPosition: this.collapseConfigPosition, ellipsesPositionedEnd: this._ellipsesPositionedEnd }))));
  }
  render() {
    return this.getItemContent();
  }
  get _element() { return getElement(this); }
  static get watchers() { return {
    "items": ["watchPropHandler"],
    "hiddenItems": ["watchPropHiddenItems"]
  }; }
};
EzBreadcrumb.style = ezBreadcrumbCss;

export { EzBreadcrumb as ez_breadcrumb };
