"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tabs = void 0;
const react_1 = __importStar(require("react"));
const inlines_1 = require("inlines");
const Text_1 = require("../Text");
const varsUtilities_1 = require("../../varsUtilities");
const utils_1 = require("../../utils/");
const hooks_1 = require("../../hooks");
const castToNumber = (tab) => {
    return typeof tab === 'number' ? tab : parseInt(tab);
};
const TabWrapper = ({ children, index, activeTab: activeTabUnparsed, setActiveTab, borderColor = 'primary', }) => {
    const icon = children?.props?.icon;
    const activeTab = castToNumber(activeTabUnparsed);
    const isActive = index === activeTab;
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            borderTop: '1px solid transparent',
            height: '28px',
            padding: '12px 12px 14px 12px',
            display: 'flex',
            cursor: 'pointer',
            alignItems: 'center',
            borderBottom: isActive
                ? `3px solid ${(0, varsUtilities_1.color)('action', borderColor, 'normal')}`
                : '3px solid transparent',
            '&:hover': {
                borderBottom: !isActive &&
                    `3px solid ${(0, varsUtilities_1.color)('action', 'neutral', 'subtleHover')}`,
            },
            [utils_1.BpTablet]: {
                '&:hover': {
                    borderBottom: isActive
                        ? `3px solid ${(0, varsUtilities_1.color)('action', 'primary', 'normal')}`
                        : '3px solid transparent',
                },
            },
            '&:active': {
                borderBottom: !isActive &&
                    `3px solid ${(0, varsUtilities_1.color)('action', 'neutral', 'subtleActive')}`,
            },
        }, onClick: () => {
            setActiveTab(index);
        }, key: index },
        icon && (react_1.default.createElement(inlines_1.styled.div, { style: {
                marginRight: 10,
            } }, icon)),
        typeof children === 'string' ? (react_1.default.createElement(Text_1.Text, { selectable: "none", weight: index === activeTab ? 'strong' : 'medium' }, children)) : (react_1.default.createElement(Text_1.Text, { truncate: true, size: 16, selectable: "none", weight: index === activeTab ? 'strong' : 'medium' }, children.props.label))));
};
const Tabs = ({ children, style, active = 0, sameHeight, borderColor = 'primary', ...props }) => {
    const arrayChildren = react_1.default.Children.toArray(children);
    // this is weird
    console.log(arrayChildren);
    const [activeTab, setActiveTab] = (0, hooks_1.usePropState)(active);
    const elem = (0, react_1.useRef)(null);
    const tabRef = (0, react_1.useRef)(null);
    const tabRefHeight = tabRef.current?.clientHeight;
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(inlines_1.styled.div, { style: {
                borderBottom: `3px solid tranparent`,
                position: 'relative',
                ...style,
            }, ...props },
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    alignItems: 'center',
                    display: 'flex',
                    gap: 16,
                }, ref: elem }, arrayChildren.map((child, index) => (react_1.default.createElement(TabWrapper, { borderColor: borderColor, key: index, index: index, activeTab: activeTab, setActiveTab: setActiveTab }, child))))),
        react_1.default.createElement(inlines_1.styled.div, { ref: tabRef, style: {
                flex: 1,
                height: sameHeight ? tabRefHeight : null,
                display: 'flex',
            } }, children?.[activeTab])));
};
exports.Tabs = Tabs;
//# sourceMappingURL=Tabs.js.map