import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import './SessionDropdown.scss';
import Icon from '../Icon';
import Tabs from '../Tabs';
import Typography from '../Typography';
const SessionDropdown = ({ header, secondaryHeader, primaryCount, secondaryCount, primaryItems, secondaryItems, width, activeTab = 'primary', activeTabId, onPrimaryTabClick, onSecondaryTabClick, onTabClick, onDownloadClick, onDeleteClick, tabsData, }) => {
    const itemsToDisplay = secondaryHeader && activeTab === 'secondary' ? secondaryItems : primaryItems;
    const handleTabClick = (tabId) => {
        if (onTabClick) {
            onTabClick(tabId);
        }
        if (tabId === 'tab-1' && onPrimaryTabClick) {
            onPrimaryTabClick();
        }
        else if (tabId === 'tab-2' && onSecondaryTabClick) {
            onSecondaryTabClick();
        }
    };
    return (_jsxs("div", { className: "ff-resolution-dropdown", style: width ? { minWidth: width } : {}, children: [_jsx("div", { className: "ff-dropdown-notch" }), _jsx("div", { className: "ff-dropdown-header", children: _jsx("div", { className: "ff-dropdown-header-content", children: secondaryHeader && tabsData && activeTabId ? (_jsxs(_Fragment, { children: [_jsx(Tabs, { tabsData: tabsData, activeTabId: activeTabId, onTabClick: handleTabClick }), _jsxs("div", { className: "ff-dropdown-header-icons", children: [_jsx(Icon, { name: "download_file", className: "ff-dropdown-icon ff-download-icon", onClick: onDownloadClick, width: 18, height: 20 }), _jsx(Icon, { name: "delete_icon", className: "ff-dropdown-icon ff-delete-icon", onClick: onDeleteClick, width: 25, height: 25 })] })] })) : secondaryHeader ? (_jsxs("div", { className: "ff-dropdown-header-dual", children: [_jsxs("div", { className: `ff-dropdown-header-item ${activeTab === 'primary' ? 'active' : ''}`, onClick: onPrimaryTabClick, children: [_jsx(Typography, { fontSize: 16, fontWeight: "semi-bold", className: "ff-dropdown-text", children: header }), primaryCount && _jsx("span", { className: "ff-dropdown-count", children: primaryCount })] }), _jsxs("div", { className: `ff-dropdown-header-item ${activeTab === 'secondary' ? 'active' : ''}`, onClick: onSecondaryTabClick, children: [_jsx(Typography, { fontSize: 16, fontWeight: "semi-bold", className: "ff-dropdown-text", children: secondaryHeader }), secondaryCount && _jsx("span", { className: "ff-dropdown-count", children: secondaryCount })] }), _jsxs("div", { className: "ff-dropdown-header-icons", children: [_jsx(Icon, { name: "download_file", className: "ff-dropdown-icon ff-download-icon", onClick: onDownloadClick, width: 18, height: 20 }), _jsx(Icon, { name: "delete_icon", className: "ff-dropdown-icon ff-delete-icon", onClick: onDeleteClick, width: 25, height: 25 })] })] })) : (_jsx(Typography, { fontSize: 16, fontWeight: "semi-bold", children: header })) }) }), _jsx("ul", { className: "ff-dropdown-list", children: itemsToDisplay?.map((item, index) => (_jsx("li", { className: "ff-dropdown-item", children: item }, index))) })] }));
};
export default SessionDropdown;
//# sourceMappingURL=SessionDropdown.js.map