import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef, useState, useMemo } from 'react';
import './DebugToolsPanel.scss';
import Button from '../Button';
import Icon from '../Icon';
import Typography from '../Typography';
import Tabs from '../Tabs';
const DebugToolsPanel = forwardRef(({ 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 default DebugToolsPanel;
//# sourceMappingURL=DebugToolsPanel.js.map