import { unsafeCSS, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { repeat } from "lit/directives/repeat.js";
import compentStyle from "./tab-row.css.js";
import "../tab-item/tab-item.js";
import "../icon-button/icon-button.js";
import "../../icons/icon-placeholder.js";
import { customElement } from "../../decorator.js";
import "../../icons/icon-up-iec.js";
import { BadgeType, BadgeSize } from "../badge/badge.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let ObcTabRow = class extends LitElement {
  constructor() {
    super(...arguments);
    this.tabs = [];
    this.selectedTabId = "";
    this.hasClose = false;
    this.hug = false;
    this.hasAddNewTab = false;
  }
  handleTabClick(_, tabId) {
    const tabIndex = this.tabs.findIndex((t) => t.id === tabId);
    if (tabIndex === -1) return;
    this.selectedTabId = this.tabs[tabIndex].id;
    this.dispatchEvent(
      new CustomEvent("tab-selected", {
        detail: { tab: this.tabs[tabIndex], id: tabId, index: tabIndex },
        bubbles: true,
        composed: true
      })
    );
  }
  handleTabClose(event, tabId) {
    event.stopPropagation();
    const tabIndex = this.tabs.findIndex((t) => t.id === tabId);
    if (tabIndex === -1) return;
    const removedTab = this.tabs[tabIndex];
    this.tabs = [
      ...this.tabs.slice(0, tabIndex),
      ...this.tabs.slice(tabIndex + 1)
    ];
    if (removedTab.id === this.selectedTabId && this.tabs.length) {
      const newIdx = Math.min(tabIndex, this.tabs.length - 1);
      this.selectedTabId = this.tabs[newIdx].id;
    }
    this.dispatchEvent(
      new CustomEvent("tab-closed", {
        detail: { tab: removedTab, id: removedTab.id, index: tabIndex },
        bubbles: true,
        composed: true
      })
    );
  }
  handleAddNewTab() {
    this.dispatchEvent(
      new CustomEvent("add-new-tab", { bubbles: true, composed: true })
    );
  }
  renderTab(tab, index) {
    const isFirst = index === 0;
    const isChecked = tab.id === this.selectedTabId;
    return html`
      <obc-tab-item
        .title=${tab.title}
        .checked=${isChecked}
        .hasClose=${this.hasClose}
        .hasLeadingIcon=${tab.hasLeadingIcon ?? true}
        .hasTitle=${true}
        .hasDivider=${!isFirst}
        .hug=${this.hug}
        .disabled=${tab.disabled || false}
        .hasBadge=${tab.hasBadge || tab.badgeCount !== void 0 && tab.badgeCount > 0}
        .badgeCount=${tab.badgeCount || 0}
        .badgeType=${tab.badgeType ?? BadgeType.regular}
        .badgeSize=${tab.badgeSize ?? BadgeSize.regular}
        .badgeShowNumber=${tab.badgeShowNumber ?? true}
        .showLeadingBadgeIcon=${tab.showLeadingBadgeIcon || false}
        @tab-click=${(e) => this.handleTabClick(e, tab.id)}
        @tab-close=${(e) => this.handleTabClose(e, tab.id)}
      >
        ${tab.hasLeadingIcon !== false ? html`
              <slot name="tab-${tab.id}-icon" slot="leading-icon">
                <obi-placeholder></obi-placeholder>
              </slot>
            ` : ""}
        <span slot="title">${tab.title}</span>
        ${tab.showLeadingBadgeIcon ? html`
              <slot name="tab-${tab.id}-badge-icon" slot="badge-icon">
                <obi-placeholder></obi-placeholder>
              </slot>
            ` : ""}
      </obc-tab-item>
    `;
  }
  render() {
    return html`
      <div class="wrapper" role="tablist">
        ${repeat(
      this.tabs,
      (t) => t.id,
      (t, i) => this.renderTab(t, i)
    )}
        ${this.hasAddNewTab ? html`
              <obc-icon-button
                class="add-new-tab"
                variant="flat"
                @click=${this.handleAddNewTab}
                aria-label="Add new tab"
              >
                <obi-up-iec></obi-up-iec>
              </obc-icon-button>
            ` : ""}
      </div>
    `;
  }
};
ObcTabRow.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Array })
], ObcTabRow.prototype, "tabs", 2);
__decorateClass([
  property({ type: String, attribute: "selected-tab-id" })
], ObcTabRow.prototype, "selectedTabId", 2);
__decorateClass([
  property({ type: Boolean, attribute: "has-close" })
], ObcTabRow.prototype, "hasClose", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTabRow.prototype, "hug", 2);
__decorateClass([
  property({ type: Boolean, attribute: "has-add-new-tab" })
], ObcTabRow.prototype, "hasAddNewTab", 2);
ObcTabRow = __decorateClass([
  customElement("obc-tab-row")
], ObcTabRow);
export {
  ObcTabRow
};
//# sourceMappingURL=tab-row.js.map
