var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { h } from '@stencil/core';
import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
export class VegaTabGroupTabListRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.TAB_LABEL_MAX_SIZE = 32;
    /* istanbul ignore next */
    /** The `getCarouselDomRef` method is a getter function that returns the reference to the `carouselDom`
    element. It is used to access the `carouselDom` element from outside the class. By returning the
    reference to the `carouselDom` element, other parts of the code can interact with the `carouselDom`
    element and perform operations on it. */
    this.getCarouselDomRef = () => {
      return this.carouselDom;
    };
  }
  render() {
    return (h("div", { class: {
        'tab-list': true,
        'menu': this.overflow === 'menu',
        'scroll': this.overflow === 'scroll',
      } },
      this.overflow === 'menu' && this.renderTabListInMenuOverflow(),
      this.overflow === 'scroll' && this.renderTabListInScrollOverflow()));
  }
  renderTabListInMenuOverflow() {
    return (h("vega-carousel", { showSlider: false, ref: (el) => (this.carouselDom = el) }, this.tabPages.length > 0 ? (this.tabPages.map((tabPage, index) => {
      return h("div", { key: index }, this.renderTabList(tabPage));
    })) : (h("div", null, this.renderTabList(this.tabItems)))));
  }
  renderTabListInScrollOverflow() {
    return (h("div", { class: "overflow-scroll" }, this.tabPages.map((tabPage, index) => {
      return h("div", { key: index }, this.renderTabList(tabPage));
    })));
  }
  renderTabList(showTabItems) {
    return (h("vega-flex", { gap: this.gap }, showTabItems.map((item) => {
      return (h("div", { class: {
          'vega-tab': true,
          'selected': this.selectedTabDataTarget === item.dataTarget,
          'last-page': this.currentPageIndex + 1 === this.tabPages.length,
          'vega-flex-shrink-0': true,
          'v-min-w-min': true,
          'disabled': Boolean(item.disabled),
        }, "data-target": item.dataTarget, key: item.dataTarget },
        h("div", { class: "vega-tab-container" },
          h("div", { class: {
              'label': true,
              'vega-close-icon-space': this.showCloseButton,
            }, 
            /* eslint-disable-next-line react/jsx-no-bind */
            onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: item.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
            this.renderPrefixIconDom(item),
            this.renderTabLabelDom(item),
            this.renderCounterBadgeDom(item)),
          this.closeButtonRenderer.render(item))));
    })));
  }
  renderPrefixIconDom(item) {
    const prefixIcon = item.prefixIcon;
    return prefixIcon && h("vega-icon", { icon: prefixIcon });
  }
  renderTabLabelDom(item) {
    const labelLength = item.label.length;
    return labelLength > this.TAB_LABEL_MAX_SIZE ? (h("vega-tooltip", { text: item.label, placement: "bottom", "position-relative-to": this.positionRelativeTo },
      h("span", null,
        item.label.substring(0, this.TAB_LABEL_MAX_SIZE),
        "..."))) : (item.label);
  }
  renderCounterBadgeDom(item) {
    const counterBadge = item.counterBadge;
    const counterBadgeClass = this.getCounterBadgeClassByCount(counterBadge);
    return ((counterBadge === null || counterBadge === void 0 ? void 0 : counterBadge.count) !== undefined &&
      counterBadge.count > 0 && (h("div", { class: `vega-counter-badge ${counterBadgeClass}` },
      h("vega-counter-badge", { count: counterBadge.count, color: counterBadge.color }))));
  }
  getCounterBadgeClassByCount(counterBadge) {
    if (counterBadge && counterBadge.count) {
      const digits = counterBadge.count.toString().length;
      if (digits === 1) {
        return 'one-digit';
      }
      else if (digits === 2) {
        return 'two-digits';
      }
      else {
        return 'multi-digits';
      }
    }
    else {
      return '';
    }
  }
  handleTabItemClick(dataTarget) {
    this.selectedTargetController.handleTabItemClick(dataTarget);
  }
}
__decorate([
  MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "tabPages", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "currentPageIndex", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "selectedTabDataTarget", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "gap", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "showCloseButton", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "tabItems", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "overflow", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupTabListRenderer.prototype, "positionRelativeTo", void 0);
__decorate([
  MapToComponentField({ componentFieldName: 'vegaTabGroupCloseButtonRenderer' })
], VegaTabGroupTabListRenderer.prototype, "closeButtonRenderer", void 0);
__decorate([
  MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
], VegaTabGroupTabListRenderer.prototype, "selectedTargetController", void 0);
