import { LightningElement, api } from "lwc";
import cx from "classnames";
export default class TabPanelItem extends LightningElement {
    @api groupId!: string;
    @api index!: number;
    @api active!: boolean;
    @api tabLabel!: string;
    @api role: "button" | "tab" = "tab";

    @api focus() {
        const button = this.template.querySelector("button");
        if (!button) {
            return;
        }
        button.focus();
    }

    private get isButtonRole(): boolean {
        return this.role === "button";
    }

    private get activeTabIndex() {
        return this.active ? 0 : -1;
    }

    private get panelId() {
        return `tabs--${this.groupId}--panel--${this.index}`;
    }

    private get tabId() {
        return `tabs--${this.groupId}--tab--${this.index}`;
    }

    private get className() {
        return cx("tab", this.active && "tab-active");
    }

    private onClick() {
        this.dispatchEvent(
            new CustomEvent("select", {
                detail: this.index
            })
        );
    }
}