import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState, useEffect } from 'react';
import classNames from 'classnames';
import Icon from '../Icon';
import Typography from '../Typography';
import Tooltip from '../Tooltip';
import './BrowserTabs.scss';
import '../../assets/styles/_colors.scss';
const BrowserTabs = ({ tabsData, activeTabId, onTabClick, onTabClose, onTabAdd, maxTabWidth = 132, showCloseOnActive = true, }) => {
    const containerRef = useRef(null);
    const [tabWidth, setTabWidth] = useState();
    const [failedIcons, setFailedIcons] = useState({});
    const labelRefs = useRef({});
    const labelObservers = useRef({});
    const [overflowedTabs, setOverflowedTabs] = useState({});
    useEffect(() => {
        const updateTabWidth = () => {
            if (containerRef.current) {
                const containerWidth = containerRef.current.getBoundingClientRect().width - maxTabWidth;
                const calculatedWidth = containerWidth / tabsData.length;
                setTabWidth(Math.min(maxTabWidth, calculatedWidth));
            }
        };
        updateTabWidth();
        window.addEventListener('resize', updateTabWidth);
        return () => window.removeEventListener('resize', updateTabWidth);
    }, [tabsData.length, maxTabWidth]);
    const handleIconError = (tabId) => {
        setFailedIcons((prev) => ({ ...prev, [tabId]: true }));
    };
    useEffect(() => {
        tabsData.forEach((tab) => {
            const el = labelRefs.current[tab.id];
            if (!el)
                return;
            if (labelObservers.current[tab.id]) {
                labelObservers.current[tab.id]?.disconnect();
            }
            const observer = new ResizeObserver(() => {
                setOverflowedTabs((prev) => ({
                    ...prev,
                    [tab.id]: el.scrollWidth > el.clientWidth,
                }));
            });
            observer.observe(el);
            labelObservers.current[tab.id] = observer;
        });
        return () => {
            Object.values(labelObservers.current).forEach((obs) => obs.disconnect());
            labelObservers.current = {};
        };
    }, [tabsData, tabWidth]);
    return (_jsxs("div", { className: "ff-browser-tabs-container", ref: containerRef, children: [_jsxs("div", { className: "ff-browser-tab-row", children: [_jsx("div", { className: "ff-tab-button-container", children: tabsData.map((tab, index) => {
                            const isActive = activeTabId === tab.id;
                            return (_jsxs("div", { className: classNames('ff-tab-wrapper', { active: isActive }), children: [_jsx(Tooltip, { title: overflowedTabs[tab.id] ? tab.label : '', children: _jsx("button", { onClick: () => onTabClick(tab.id), className: classNames('ff-tab-button', {
                                                shrink: tabWidth && tabWidth <= 80,
                                            }), style: {
                                                width: tabWidth ? `${tabWidth}px` : 'auto',
                                                padding: tabWidth === undefined
                                                    ? '0px'
                                                    : tabWidth < 60
                                                        ? '0px'
                                                        : tabWidth < 80
                                                            ? '0px 2px'
                                                            : tabWidth < 132
                                                                ? '0px 8px'
                                                                : `0px ${tabWidth / 17}px`,
                                            }, children: _jsxs("div", { className: "ff-tab-content", children: [tabWidth &&
                                                        tabWidth >= 20 &&
                                                        (!isActive || tabWidth >= 80) && (_jsx(_Fragment, { children: tab.tabIconSrc && !failedIcons[tab.id] ? (_jsx("img", { src: tab.tabIconSrc, alt: tab.label, className: "ff-tab-icon", onError: () => handleIconError(tab.id) })) : (_jsx(Icon, { name: tab.tabIcon || 'web_icon', hoverEffect: false, color: "inherit" })) })), tabWidth && tabWidth > 40 && (_jsx("div", { className: "ff-tab-label-container", children: _jsx("div", { ref: (el) => (labelRefs.current[tab.id] = el), className: "ff-tab-label", children: _jsx(Typography, { children: tab.label, lineHeight: "18px", fontWeight: isActive ? 'semi-bold' : 'regular', color: isActive
                                                                    ? 'var(--tabs-label-active-color)'
                                                                    : 'var(--tabs-label-default-color)' }) }) })), ((tabWidth && tabWidth >= 80) || isActive) &&
                                                        showCloseOnActive && (_jsx(Icon, { name: "close", className: "ff-close-icon", hoverEffect: true, onClick: (e) => {
                                                            e.stopPropagation();
                                                            if (onTabClose) {
                                                                onTabClose(tab.id);
                                                            }
                                                        } }))] }) }) }), tabWidth &&
                                        tabWidth < maxTabWidth &&
                                        !(isActive ||
                                            index === tabsData.length - 1 ||
                                            (activeTabId === tabsData[0]?.id && index === 0) ||
                                            activeTabId === tabsData[index + 1]?.id) && (_jsx("span", { className: `ff-tab-separator ${tabWidth > 80
                                            ? 'wide-browser-tab'
                                            : 'narrow-browser-tab'}` }))] }, tab.id));
                        }) }), _jsx(Tooltip, { title: "Add", children: _jsx("div", { className: "ff-tab-plus-icon", onClick: onTabAdd, children: _jsx(Icon, { name: "add_file", color: "var(--secondary-icon-color)", width: 12, height: 12, hoverEffect: true }) }) })] }), _jsx("div", { className: `ff-tab-content`, children: tabsData.find((tab) => tab.id === activeTabId)?.component })] }));
};
export default BrowserTabs;
//# sourceMappingURL=BrowserTabs.js.map