import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./tabbed-card.css.js";
import { customElement } from "../../decorator.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 ObcTabbedCard = class extends LitElement {
  constructor() {
    super(...arguments);
    this.nTabs = 1;
    this.selectedTab = 0;
    this.hasDefaultSlotOnly = false;
    this.hasTabIcons = false;
  }
  _handleKeyDown(e) {
    const targetButton = e.target;
    if (!targetButton.classList.contains("tab-button")) return;
    const currentIndex = this.selectedTab;
    switch (e.key) {
      case "ArrowRight":
        this.setSelectedTab((currentIndex + 1) % this.nTabs);
        break;
      case "ArrowLeft":
        this.setSelectedTab((currentIndex - 1 + this.nTabs) % this.nTabs);
        break;
      case "Home":
        this.setSelectedTab(0);
        break;
      case "End":
        this.setSelectedTab(this.nTabs - 1);
        break;
      default:
        return;
    }
    e.preventDefault();
    this._focusTab(this.selectedTab);
  }
  setSelectedTab(index) {
    this.selectedTab = index;
    this.dispatchEvent(new CustomEvent("tab-change", { detail: { tab: index } }));
  }
  _focusTab(index) {
    const button = this.shadowRoot?.querySelector(
      `button[data-index="${index}"]`
    );
    button?.focus();
  }
  _generateTabHeaders() {
    return [...Array(this.nTabs)].map((_, index) => {
      const hasDivider = index !== this.nTabs - 1 && this.selectedTab !== index && index + 1 !== this.selectedTab;
      const tabIcon = this.hasTabIcons ? html`<span class="tab-icon">
            <slot name="tab-icon-${index}"></slot>
          </span>` : nothing;
      return html`
        <button
          class="tab-button ${hasDivider ? "has-divider" : ""}"
          role="tab"
          aria-selected="${this.selectedTab === index}"
          aria-controls="panel-${index}"
          id="tab-${index}"
          data-index="${index}"
          tabindex="${this.selectedTab === index ? 0 : -1}"
          @click="${() => this.setSelectedTab(index)}"
          @focus="${() => this.setSelectedTab(index)}"
        >
          <div class="tab-title-container">
            ${tabIcon}
            <slot class="tab-title" name="tab-title-${index}"
              >Tab ${index + 1}</slot
            >
          </div>
        </button>
      `;
    });
  }
  _generateTabPanels() {
    if (this.hasDefaultSlotOnly) {
      return html`<div
        role="tabpanel"
        class="tab-content"
        id="panel-${this.selectedTab}"
        aria-labelledby="tab-${this.selectedTab}"
        tabindex="0"
      >
        <slot></slot>
      </div>`;
    }
    return [...Array(this.nTabs)].map(
      (_, index) => html`
        <div
          role="tabpanel"
          id="panel-${index}"
          aria-labelledby="tab-${index}"
          tabindex="0"
          ?hidden="${this.selectedTab !== index}"
        >
          <slot name="tab-content-${index}"></slot>
        </div>
      `
    );
  }
  render() {
    return html`
      <div class="tab-container" @keydown="${this._handleKeyDown}">
        <div class="tab-header" role="tablist" aria-label="Tab List">
          ${this._generateTabHeaders()}
        </div>
        <div class="tab-panels">${this._generateTabPanels()}</div>
      </div>
    `;
  }
};
ObcTabbedCard.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Number })
], ObcTabbedCard.prototype, "nTabs", 2);
__decorateClass([
  property({ type: Number })
], ObcTabbedCard.prototype, "selectedTab", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTabbedCard.prototype, "hasDefaultSlotOnly", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTabbedCard.prototype, "hasTabIcons", 2);
ObcTabbedCard = __decorateClass([
  customElement("obc-tabbed-card")
], ObcTabbedCard);
export {
  ObcTabbedCard
};
//# sourceMappingURL=tabbed-card.js.map
