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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { getIconNameWithoutStyle } from '../button/button.utils';
import Buttonsimple from '../buttonsimple/buttonsimple.component';
import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
import { ROLE } from '../../utils/roles';
import { LifeCycleMixin } from '../../utils/mixins/lifecycle/LifeCycleMixin';
import { DEFAULTS, TAB_SIZES, TAB_VARIANTS } from './tab.constants';
import styles from './tab.styles';
/**
 * `mdc-tab` is Tab component to be used within the Tabgroup.
 *
 * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.
 *
 * Pass attribute `tabid` when using inside of `tablist` component.
 *
 * The `slot="badge"` can be used to add a badge to the tab.
 *
 * The `slot="chip"` can be used to add a chip to the tab.
 *
 * For `icon`, the `mdc-icon` component is used to render the icon.
 *
 * Note: Icons can be used in conjunction with badges or chips.
 * Badges and chips should not be used at the same time.
 *
 * @dependency mdc-icon
 * @dependency mdc-text
 *
 * @event click - (React: onClick) This event is dispatched when the tab is clicked.
 * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
 * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
 * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.
 * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes
 * <br />
 * Event Data: `detail: { tabId: this.tabId, active }`
 * <br />
 * Note: the activechange event is used by the tab list component to react to the change in state of the tab,
 * so this event won't be needed if the tab list is used.
 *
 * @tagname mdc-tab
 *
 * @cssproperty --mdc-tab-height - The height of the tab.
 * @cssproperty --mdc-tab-padding-left - The left padding of the tab.
 * @cssproperty --mdc-tab-padding-right - The right padding of the tab.
 * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.
 * @cssproperty --mdc-tab-background-color - The background color of the tab.
 * @cssproperty --mdc-tab-color - The text color of the tab.
 * @cssproperty --mdc-tab-border-radius - The border radius of the tab.
 * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.
 *
 * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.
 * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.
 *
 * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.
 * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.
 * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
 * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
 *
 * @csspart container - The container of the tab.
 * @csspart regular-icon - The icon of the tab, if inactive.
 * @csspart filled-icon - The icon of the tab, if active.
 * @csspart indicator - The indicator of the tab.
 * @csspart text - The text of the tab.
 *
 * @slot prefix - The slot for the content before the text, typically used for the icon.
 * @slot postfix - The slot for the content after the text, typically used for the badge or chip.
 */
class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
    constructor() {
        super(...arguments);
        /**
         * The tab's active state indicates whether it is currently toggled on (active) or off (inactive).
         * When the active state is true, the tab is considered to be in an active state, meaning it is toggled on.
         * Conversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.
         *
         * This attribute also controls the "aria-selected" attribute of the tab.
         * When the tab is active, "aria-selected" is set to true, indicating that the tab is selected.
         * When the tab is inactive, "aria-selected" is set to false, indicating that the tab is not selected.
         *
         * @default false
         */
        this.active = DEFAULTS.ACTIVE;
        /**
         * Tab can have three variants:
         * - `glass`
         * - `line`
         * - `pill`
         *
         * It defines the background and foreground color of the tab.
         * @default pill
         */
        this.variant = DEFAULTS.VARIANT;
        /**
         * Size of the tab in pixels.
         * - `32`: Default size (2rem)
         * - `28`: Compact size (1.75rem)
         * @default 32
         */
        this.size = DEFAULTS.SIZE;
        /**
         * Dispatch the activechange event.
         *
         * @param active - The active state of the tab.
         * @internal
         */
        this.handleTabActiveChange = (active) => {
            const event = new CustomEvent('activechange', {
                detail: { tabId: this.tabId, active },
                bubbles: true,
            });
            this.dispatchEvent(event);
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this.role = ROLE.TAB;
        this.type = undefined;
        this.ariaStateKey = 'aria-selected';
        if (!this.tabId && this.onerror) {
            this.onerror('tab id is required');
        }
    }
    /**
     * Sets the variant attribute for the tab component.
     * If the provided variant is not included in the TAB_VARIANTS,
     * it defaults to the value specified in DEFAULTS.VARIANT.
     *
     * @param variant - The variant to set.
     */
    setVariant(variant) {
        this.setAttribute('variant', Object.values(TAB_VARIANTS).includes(variant) ? variant : DEFAULTS.VARIANT);
    }
    /**
     * Sets the size attribute for the tab component.
     * If the provided size is not included in TAB_SIZES,
     * it defaults to the value specified in DEFAULTS.SIZE.
     *
     * @param size - The size to set.
     */
    setSize(size) {
        this.setAttribute('size', Object.values(TAB_SIZES).includes(size) ? `${size}` : DEFAULTS.SIZE.toString());
    }
    getFilledIconName() {
        if (!this.iconName) {
            return undefined;
        }
        const isFilled = this.iconName.endsWith('-filled');
        if (isFilled) {
            return this.iconName;
        }
        const baseIcon = getIconNameWithoutStyle(this.iconName);
        return `${baseIcon}-filled`;
    }
    executeAction() {
        // Toggle the active state of the tab.
        this.handleTabActiveChange(this.active);
    }
    update(changedProperties) {
        super.update(changedProperties);
        if (changedProperties.has('size')) {
            this.setSize(this.size);
        }
        if (changedProperties.has('variant')) {
            this.setVariant(this.variant);
        }
    }
    render() {
        return html `
      <div part="container">
        <div part="leading">
          <slot name="prefix">
            ${this.iconName
            ? html `
                  <div part="icon-container">
                    <mdc-icon
                      name="${this.iconName}"
                      size="1"
                      length-unit="rem"
                      part="regular-icon"
                    ></mdc-icon>
                    <mdc-icon
                      name="${ifDefined(this.getFilledIconName())}"
                      size="1"
                      length-unit="rem"
                      part="filled-icon"
                    ></mdc-icon>
                  </div>
                `
            : nothing}
          </slot>
          ${this.text
            ? html ` <mdc-text
                type=${this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_MEDIUM}
                tagname=${VALID_TEXT_TAGS.SPAN}
                data-text=${this.text}
                part="text"
                >${this.text}</mdc-text
              >`
            : nothing}
        </div>
        <slot name="postfix"></slot>
      </div>
      <div part="indicator"></div>
    `;
    }
}
Tab.styles = [...Buttonsimple.styles, ...styles];
__decorate([
    property({ type: Boolean, reflect: true }),
    __metadata("design:type", Boolean)
], Tab.prototype, "active", void 0);
__decorate([
    property({ type: String, reflect: true }),
    __metadata("design:type", String)
], Tab.prototype, "text", void 0);
__decorate([
    property({ type: String, reflect: true }),
    __metadata("design:type", String)
], Tab.prototype, "variant", void 0);
__decorate([
    property({ type: Number, reflect: true }),
    __metadata("design:type", Number)
], Tab.prototype, "size", void 0);
__decorate([
    property({ type: String, reflect: true, attribute: 'tab-id' }),
    __metadata("design:type", String)
], Tab.prototype, "tabId", void 0);
export default Tab;
