import { h } from "@stencil/core";
import { BEM } from "../../../utils/bem";
import { TabButton } from "./tab-button";
export const TabNav = ({ swiper, items, tabsId, isVertical, inNavbar, isMobile, isTouch, ariaLabel, lineActive, lineHidden, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, showSwiperControls, iconPosition, context, onSelectTab, dimInactiveElements, }) => {
    const bemEl = BEM.block('tabs').element('nav');
    const navInnerEl = bemEl.element('inner');
    const navContainerEl = bemEl.element('container');
    const navLineEl = bemEl.element('line');
    const navBorderEl = bemEl.element('border');
    const tabs = items.filter(tab => !tab.invisible);
    const isFullHeight = inNavbar && !isTouch;
    const hasSubLabelInGroup = items.some(item => {
        return item.subLabel && item.subLabel.length > 0;
    });
    const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, isExpanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab, hasSubLabelInGroup: hasSubLabelInGroup, dimInactiveElements: dimInactiveElements }));
    const NavOrDiv = isLinkList ? 'nav' : 'div';
    const DivOrList = isLinkList ? 'ul' : 'div';
    return (h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('full-height').class(isFullHeight)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)), swiper.cssSwiper()) }, h(NavOrDiv, { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign({}, swiper.cssInnerSwiper()), navInnerEl.class()), navInnerEl.modifier(`full-height`).class(isFullHeight)), ref: el => {
            if (el) {
                swiper.innerEl = el;
            }
        }, "aria-label": isLinkList ? ariaLabel : undefined }, h(DivOrList, { id: swiper.containerId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, swiper.cssSwiperContainer()), navContainerEl.class()), navContainerEl.modifier(`vertical`).class(isVertical)), navContainerEl.modifier(`expanded`).class(expanded && !isVertical)), role: isLinkList ? undefined : 'tablist', "aria-label": isLinkList ? undefined : ariaLabel, ref: el => {
            if (el) {
                swiper.containerEl = el;
            }
        } }, tabs.map((tab, index) => (h(Button, { item: tab, index: index }))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, navLineEl.class()), navLineEl.modifier(`active`).class(lineActive)), navLineEl.modifier(`inverted`).class(inverted)), navLineEl.modifier(`animated`).class(animated)), navLineEl.modifier(`vertical`).class(isVertical)), navLineEl.modifier(`hidden`).class(lineHidden)) }), border ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, navBorderEl.class()), navBorderEl.modifier(`inverted`).class(inverted)), navBorderEl.modifier(`vertical`).class(isVertical)) })) : (''))), showSwiperControls ? swiper.renderControls() : ''));
};
