import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import Icon from '../Icon/Icon.js';
import Typography from '../Typography/Typography.js';
import classNames from '../../_virtual/index.js';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty.js';
import { isTextTruncated } from '../../utils/truncateText/truncateText.js';
import Tooltip from '../Tooltip/Tooltip.js';
import { DynamicWidthTooltip } from './DynamicWidthToolTip.js';
import { Virtuoso as qr } from '../../node_modules/.pnpm/react-virtuoso@4.18.5_react_b405f5ed2047bd1643bd07f674634652/node_modules/react-virtuoso/dist/index.js';

const VariableDropdown = ({ optionsList = [], onSelectVariable, dropdownPosition, position = 'relative', width, height = '160px', zIndex = 9999, }) => {
    const VARIABLE_ICON_MAP = {
        LOCAL: 'local_variable_icon',
        GLOBAL: 'global_variable_icon',
        PROJECT_ENVIRONMENT: 'project_env_variable_icon',
    };
    const getVariableIcon = (option) => {
        if (!option)
            return '';
        const variableId = option._id || option.id;
        if (variableId?.startsWith('PARAMETER'))
            return 'step_group_parameter';
        if (option?.parentVariableType === 'STEPGROUP' &&
            (option.type === 'LOCAL' || option?.type === 'STEPGROUP'))
            return 'step_group_variable';
        if (option.type === '_startforloop')
            return 'for_loop_variable';
        if (option.type === 'DATAPROVIDER')
            return 'data_provider_variable';
        return VARIABLE_ICON_MAP[option.type || ''] || '';
    };
    const getDisplayText = (option) => {
        if (option?.type === '_startforloop')
            return `FLV_for:${option?.name}`;
        if (option?.type === 'DATAPROVIDER')
            return `${option?.dpName}:${option?.varname}`;
        return option?.name;
    };
    function getNumericValue(value) {
        if (value.endsWith('px')) {
            const num = parseInt(value.slice(0, -2), 10);
            return isNaN(num) ? 212 : num - 66;
        }
        return 212;
    }
    // Calculate item height based on width type
    const itemHeight = 32;
    const renderItem = (index) => {
        const option = optionsList[index];
        if (!option)
            return null;
        return (jsx("div", { className: 'ff-variable-data', onMouseDown: () => onSelectVariable(option), children: width.endsWith('px') ? (jsxs(Fragment, { children: [jsx(Tooltip, { title: isTextTruncated(getDisplayText(option), getNumericValue(width), 'pixel')
                            ? getDisplayText(option)
                            : '', style: {
                            width: `${getNumericValue(width)}px`,
                        }, children: jsx(Typography, { as: "span", fontSize: 12, className: "ff-truncated_text", children: getDisplayText(option) }) }), jsx(Icon, { name: getVariableIcon(option), height: 24, width: 24, hoverEffect: true })] })) : (jsx(DynamicWidthTooltip, { option: option })) }, `${option.id}-${index}`));
    };
    return (jsx("div", { className: classNames('ff-variable-dropdown', position), style: dropdownPosition
            ? {
                top: dropdownPosition.top + 30,
                left: dropdownPosition.left - 30,
                width,
                height,
                zIndex,
            }
            : { width, height, zIndex }, children: !checkEmpty(optionsList) ? (jsx(qr, { totalCount: optionsList.length, itemContent: renderItem, style: { height, fontSize: '12px' }, overscan: 10, fixedItemHeight: itemHeight })) : (jsx("div", { className: "ff-variable-option ff-variable-option-no-data", children: jsx(Typography, { as: "span", fontSize: 12, children: "No Option" }) })) }));
};

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