import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef, useState } from 'react';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';

const SessionManager = forwardRef(({ isRotate = false, modal = [], onClick = () => { }, tooltip = {}, icons = [
    'app_actions_icon',
    'screenshot_icon',
    'video_record_icon',
    'test_gallary_icon',
    'session_setting_icon',
], className = '', disabledIcons = [], activeIcon = '', }, ref) => {
    const [hoveredIndex, setHoveredIndex] = useState(null);
    const [activeModal, setActiveModal] = useState(null);
    const handleIconClick = (index, iconName) => {
        if (disabledIcons.includes(iconName))
            return;
        onClick(index);
        if (modal.includes(iconName)) {
            setActiveModal(activeModal === iconName ? null : iconName);
        }
    };
    const handleMouseEnter = (index, iconName) => {
        if (disabledIcons.includes(iconName))
            return;
        setHoveredIndex(index);
        if (modal.includes(iconName)) {
            setActiveModal(iconName);
        }
    };
    const handleMouseLeave = () => {
        setHoveredIndex(null);
        setActiveModal(null);
    };
    const containerClass = `ff-session-manager-container ${isRotate ? 'vertical' : 'horizontal'} ${className}`;
    return (jsx("div", { ref: ref, className: containerClass, children: icons.map((iconName, index) => {
            const isDisabled = disabledIcons.includes(iconName);
            return (jsx(Tooltip, { title: tooltip?.[iconName] || '', placement: isRotate ? 'right' : 'bottom', children: jsxs("div", { className: `ff-session-manager-container__icon-wrapper  ${activeIcon === iconName ? 'active' : ''}`, onMouseEnter: () => handleMouseEnter(index, iconName), onMouseLeave: handleMouseLeave, onClick: () => handleIconClick(index, iconName), id: iconName, children: [jsx(Icon, { className: "ff-session-manager-container__icon", name: iconName, width: 24, height: 24, color: hoveredIndex === index || activeIcon === iconName
                                ? 'var(--session-control-bg)'
                                : 'var(--base-bg-color)', disabled: isDisabled }), !isDisabled &&
                            modal.includes(iconName) &&
                            activeModal === iconName && (jsx("div", { className: "ff-session-manager-container__modal" }))] }) }, iconName));
        }) }));
});
SessionManager.displayName = 'SessionManager';

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