import { h } from "@stencil/core";
import { ariaBooleanToString } from "../../../utils/aria";
import { BEM } from "../../../utils/bem";
import { toKebabCase } from "../../../utils/string";
import { TabIcon } from "./tab-icon";
import { TabLabel } from "./tab-label";
export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, isExpanded, spaceless, clickable, iconPosition, context, onSelectTab, hasSubLabelInGroup, dimInactiveElements, }) => {
    var _a;
    const bemEl = BEM.block('tabs').element('nav').element('item');
    if (item.invisible) {
        return;
    }
    const hasBubble = item.bubble !== false;
    const hasIcon = item.icon !== undefined;
    const hasIconBubble = (hasIcon && hasBubble && iconPosition !== 'horizontal' && !accordion) ||
        (isMobile && hasIcon && hasBubble && !isVertical && !accordion);
    const hasAccordionIconBubble = (accordion && hasBubble) || (accordion && isMobile && hasIcon && hasBubble && !isVertical);
    const hasLabelBubble = (!hasIcon && hasBubble && !accordion) ||
        (hasBubble && !isMobile && iconPosition === 'horizontal' && !accordion) ||
        (hasBubble && isVertical && !accordion);
    const isTabButton = item.href === undefined || item.href === '';
    const TagType = isTabButton ? 'button' : 'a';
    const attrs = isTabButton
        ? {
            'type': 'button',
            'role': 'tab',
            'aria-controls': ((_a = item.aria) === null || _a === void 0 ? void 0 : _a.controls) || item.tabPanelID || undefined,
            'aria-expanded': ariaBooleanToString(item.active),
            'aria-disabled': ariaBooleanToString(item.disabled),
            'aria-label': item.label,
        }
        : {
            role: 'listitem',
            href: item.href,
            rel: item.rel,
            target: item.target,
        };
    if (!isLinkList) {
        attrs['tabindex'] = item.active ? '0' : '-1';
    }
    const renderButton = () => (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item), onKeyDown: (ev) => {
            var _a;
            (_a = item.keyDown) === null || _a === void 0 ? void 0 : _a.emit(ev);
        } }), item.icon || item.svg ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, isExpanded: isExpanded, hasBubble: hasLabelBubble, inverted: inverted, context: context }), accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
    if (isLinkList) {
        return h("li", null, renderButton());
    }
    else {
        return renderButton();
    }
};
