import { html } from 'lit';
import { query, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { HasSlotController } from '../../internal/slot.mjs';
import { watch } from '../../internal/watch.mjs';
import { LocalizeController } from '../../utilities/localize.mjs';
import styles from './tab.styles.mjs';

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 id = 0;
class FlowUiTab extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.hasSlotController = new HasSlotController(this, "[default]", "icon");
    this.attrId = ++id;
    this.componentId = `flow-ui-tab-${this.attrId}`;
    this.panel = "";
    this.active = false;
    this.iconOnly = false;
    this.closable = false;
    this.disabled = false;
    this.placement = "top";
    this.tooltipPlacement = "top";
    this.tooltipDistance = -4;
    this.tooltipSkidding = 0;
  }
  connectedCallback() {
    super.connectedCallback();
    this.active = boolean(this.active, true);
    this.disabled = boolean(this.disabled, true);
    this.iconOnly = boolean(this.iconOnly, true);
    this.closable = boolean(this.closable, true);
    this.setAttribute("role", "tab");
  }
  handleCloseClick(event) {
    event.stopPropagation();
    this.emit("flow-ui-close");
  }
  handleActiveChange() {
    this.setAttribute("aria-selected", this.active ? "true" : "false");
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  /** Sets focus to the tab. */
  focus(options) {
    this.tab.focus(options);
  }
  /** Removes focus from the tab. */
  blur() {
    this.tab.blur();
  }
  render() {
    this.id = this.id.length > 0 ? this.id : this.componentId;
    const hasIcon = this.hasSlotController.test("icon");
    const tabTemplate = html`
      <div
        part="base"
        class=${classMap({
      tab: true,
      "tab--active": this.active,
      "tab--closable": this.closable,
      "tab--disabled": this.disabled
    })}
        tabindex=${this.disabled ? "-1" : "0"}
      >
        <div class="tab__label-wrapper">
          ${hasIcon ? html`
                <div class="tab__icon" part="icon"><slot name="icon"></slot></div>
              ` : ""}
          ${this.iconOnly ? "" : html`
                <div class="tab__label" part="label">
                  <slot></slot>
                </div>
              `}
        </div>
        ${this.closable ? html`
              <flow-ui-icon-button
                part="close-button"
                exportparts="base:close-button__base"
                name="x-lg"
                library="system"
                label=${this.localize.term("close")}
                class="tab__close-button"
                @click=${this.handleCloseClick}
                tabindex="-1"
              ></flow-ui-icon-button>
            ` : ""}
      </div>
    `;
    if (this.iconOnly) {
      return html`
        <flow-ui-tooltip
          class=${classMap({
        tab__tooltip: true
      })}
          hoist
          placement=${ifDefined(this.tooltipPlacement)}
          distance=${ifDefined(this.tooltipDistance)}
          skidding=${ifDefined(this.tooltipSkidding)}
        >
          ${tabTemplate}
          <slot slot="content"></slot>
        </flow-ui-tooltip>
      `;
    } else {
      return tabTemplate;
    }
  }
}
FlowUiTab.styles = styles;
__decorateClass([
  query(".tab")
], FlowUiTab.prototype, "tab", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiTab.prototype, "panel", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiTab.prototype, "active", 2);
__decorateClass([
  property({ type: Boolean, attribute: "icon-only" })
], FlowUiTab.prototype, "iconOnly", 2);
__decorateClass([
  property({ type: Boolean })
], FlowUiTab.prototype, "closable", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiTab.prototype, "disabled", 2);
__decorateClass([
  property()
], FlowUiTab.prototype, "label", 2);
__decorateClass([
  property({ reflect: true })
], FlowUiTab.prototype, "placement", 2);
__decorateClass([
  property({ attribute: "tooltip-placement" })
], FlowUiTab.prototype, "tooltipPlacement", 2);
__decorateClass([
  property({ attribute: "tooltip-distance", type: Number })
], FlowUiTab.prototype, "tooltipDistance", 2);
__decorateClass([
  property({ attribute: "tooltip-skidding", type: Number })
], FlowUiTab.prototype, "tooltipSkidding", 2);
__decorateClass([
  watch("active")
], FlowUiTab.prototype, "handleActiveChange", 1);
__decorateClass([
  watch("disabled")
], FlowUiTab.prototype, "handleDisabledChange", 1);

export { FlowUiTab as default };
