import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef, useState, useEffect, useMemo } from 'react';
import Button from '../Button/Button.js';
import Icon from '../Icon/Icon.js';
import Typography from '../Typography/Typography.js';
import Tabs from '../Tabs/Tabs.js';

const DebugToolsPanel = ({ buttons = [], panelContentMap = {}, headerIconsMap = {}, headerLeadingIconMap = {}, panelheight = '100%', panelwidth = '485px', }) => {
    const buttonRefs = useRef({});
    const [notchTop, setNotchTop] = useState(0);
    const [activePanel, setActivePanel] = useState(null);
    useEffect(() => {
        if (activePanel && buttonRefs.current[activePanel]) {
            const wrapper = buttonRefs.current[activePanel];
            const wrapperRect = wrapper.getBoundingClientRect();
            const containerRect = wrapper.parentElement.getBoundingClientRect();
            const offsetTop = wrapperRect.top - containerRect.top + wrapperRect.height / 2 - 10;
            setNotchTop(offsetTop);
        }
    }, [activePanel]);
    const handleClick = (label) => {
        setActivePanel((prev) => (prev === label ? null : label));
    };
    const activeTabData = useMemo(() => {
        if (!activePanel)
            return [];
        return [
            {
                id: activePanel,
                label: activePanel,
                icon: headerLeadingIconMap?.[activePanel],
            },
        ];
    }, [activePanel, headerLeadingIconMap]);
    return (jsxs("div", { className: "ff-debug-buttons-container", children: [jsx("div", { className: "ff-debug_buttons", children: buttons.map((label) => (jsx("div", { ref: (el) => (buttonRefs.current[label] = el), children: jsx(Button, { onClick: () => handleClick(label), variant: "custom", className: `ff-debug-button ${activePanel === label ? 'active' : ''}`, children: label }) }, label))) }), activePanel && (jsxs("div", { className: "ff-debug-panel", style: { height: panelheight, width: panelwidth }, children: [jsx("div", { className: "ff-dropdown-notch", style: { top: `${notchTop}px` } }), jsxs("div", { className: "ff-debug-panel__header", children: [jsx("div", { className: "ff-debug-panel__title", children: jsx(Tabs, { tabsData: activeTabData, activeTabId: activePanel, variant: "default", noPadding: true, onTabClick: () => { } }) }), jsx("div", { className: "ff-debug-panel__header-icons", children: headerIconsMap?.[activePanel] ?? (jsx(Icon, { name: "close", className: "ff-debug-panel__close-icon", onClick: () => setActivePanel(null) })) })] }), jsx("div", { className: "ff-debug-panel__content", children: jsx(Typography, { children: panelContentMap?.[activePanel] }) })] }))] }));
};
DebugToolsPanel.displayName = 'DebugToolsPanel';

export { DebugToolsPanel as default };
//# sourceMappingURL=DebugToolsPanel.js.map
