"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsNavBar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const box_1 = __importDefault(require("../box"));
const core_1 = require("../core");
const icon_1 = require("../icon");
const list_1 = require("../list");
const tag_1 = require("../tag");
const utils_1 = require("../utils");
const consts_1 = require("./consts");
const theme_1 = __importDefault(require("./theme"));
const { activeBg, border, color, hover, main } = consts_1.colors;
exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
    var _a, _b;
    const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
    const iconSize = (consts_1.iconSizeMapper === null || consts_1.iconSizeMapper === void 0 ? void 0 : consts_1.iconSizeMapper[size]) || 'md';
    const { sizes } = (_a = theme_1.default) !== null && _a !== void 0 ? _a : {};
    const fontSize = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.fontSize;
    const h = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.h;
    const borderWidth = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.borderWidth;
    const py = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.py;
    const iconMarginRight = size === 'xxl' ? '16px' : '8px';
    const isActive = (tab) => !tab.disabled && (tab === null || tab === void 0 ? void 0 : tab.index) === activeNavItem;
    return ((0, jsx_runtime_1.jsxs)(list_1.List, { alignItems: "end", borderBottom: showBorder ? `1px solid ${border}` : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: [(_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => ((0, jsx_runtime_1.jsxs)(list_1.ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.index || 0, e), position: "relative", px: "16px", py: py, children: [(0, jsx_runtime_1.jsxs)(box_1.default, { alignItems: "center", children: [!!tab.icon && (0, jsx_runtime_1.jsx)(icon_1.Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && ((0, jsx_runtime_1.jsx)(tag_1.TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => {
                            var _a;
                            e.stopPropagation();
                            (_a = tab === null || tab === void 0 ? void 0 : tab.onDelete) === null || _a === void 0 ? void 0 : _a.call(tab, e);
                        }, title: "Delete" })), isActive(tab) && ((0, jsx_runtime_1.jsx)(box_1.default, { animation: animationDirection, bg: main, bottom: "-1px", className: "vui-tabsNavBarItemActiveIndicator", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.index))), !!actions && ((0, jsx_runtime_1.jsx)(box_1.default, { ml: "auto", px: 0.75, py: 0.5, children: actions }))] }));
});
exports.TabsNavBar.displayName = 'TabsNavBar';
exports.default = exports.TabsNavBar;
//# sourceMappingURL=tabsNavBar.js.map