import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { useCallback, useEffect, useLayoutEffect, useState, } from 'react';
export function TabSet({ tabs, tabTitles, activeTab, onTabChange, }) {
    const [highlightStyle, setHighlightStyle] = useState({
        left: 0,
        width: 140,
    });
    const calculateHighlightStyle = useCallback(() => {
        const tabButton = globalThis.document?.querySelector(`.seam-tab-button:nth-of-type(${tabs.indexOf(activeTab) + 1})`);
        setHighlightStyle({
            left: tabButton?.offsetLeft ?? 0,
            width: tabButton?.offsetWidth ?? 140,
        });
    }, [activeTab, tabs]);
    useLayoutEffect(() => {
        calculateHighlightStyle();
    }, [activeTab, calculateHighlightStyle]);
    useEffect(() => {
        globalThis.addEventListener?.('resize', calculateHighlightStyle);
        return () => {
            globalThis.removeEventListener?.('resize', calculateHighlightStyle);
        };
    }, [calculateHighlightStyle]);
    return (_jsx("div", { className: 'seam-tab-set', children: _jsxs("div", { className: 'seam-tab-set-buttons', children: [_jsx("div", { className: 'seam-tab-set-highlight', style: highlightStyle }), tabs.map((tab) => (_jsx(TabButton, { tab: tab, title: tabTitles[tab], isActive: activeTab === tab, onTabChange: onTabChange, setHighlightStyle: setHighlightStyle }, tab)))] }) }));
}
function TabButton({ tab, title, isActive, onTabChange, setHighlightStyle, }) {
    const handleClick = (ev) => {
        onTabChange(tab);
        setHighlightStyle({
            left: ev.currentTarget.offsetLeft,
            width: ev.currentTarget.offsetWidth,
        });
    };
    return (_jsx("button", { className: classNames('seam-tab-button', isActive && 'seam-tab-button-active'), type: 'button', onClick: handleClick, children: _jsx("p", { className: 'seam-tab-button-label', children: title }) }));
}
//# sourceMappingURL=TabSet.js.map