"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_2 = require("swiper/react");
const uncontrollable_1 = require("uncontrollable");
const LineBreak_1 = __importDefault(require("../LineBreak"));
const ElementChildren_1 = require("./ElementChildren");
const TabContext_1 = require("./TabContext");
const TabLink_1 = require("./TabLink");
const TabRouteContainer_1 = require("./TabRouteContainer");
const tabs_module_scss_1 = __importDefault(require("./tabs.module.scss"));
const options = {
    slidesPerView: 'auto',
    allowTouchMove: true,
    spaceBetween: 32,
    noSwiping: false,
};
const Tabs = (props) => {
    const { onSelect, children, variant = 'tabs', activeKey = null, fullBleedOnLineBreak = true, } = (0, uncontrollable_1.useUncontrolled)(props, {
        activeKey: 'onSelect',
    });
    return (react_1.default.createElement(TabContext_1.TabContextProvider, { defaultActiveKey: activeKey || '', onChange: onSelect },
        react_1.default.createElement("ul", { className: `c-nav c-nav-${variant} ${tabs_module_scss_1.default.tabCarousel}` },
            react_1.default.createElement(react_2.Swiper, Object.assign({}, options), (0, ElementChildren_1.reactMap)(children, (child, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index },
                react_1.default.createElement(TabLink_1.TabLink, Object.assign({ index: index }, child.props), child)))))),
        react_1.default.createElement(LineBreak_1.default, { noMargins: true, fullBleed: fullBleedOnLineBreak }),
        react_1.default.createElement(TabRouteContainer_1.TabRouteContainer, null, props.children)));
};
exports.default = Tabs;
//# sourceMappingURL=Tabs.js.map