import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import Icon from '../Icon';
import './VariableDropdown.scss';
import Typography from '../Typography';
import cx from 'classnames';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
import { isTextTruncated } from '../../utils/truncateText/truncateText';
import Tooltip from '../Tooltip';
import { DynamicWidthTooltip } from './DynamicWidthToolTip';
import { Virtuoso } from 'react-virtuoso';
const VariableDropdown = ({ optionsList = [], onSelectVariable, dropdownPosition, position = 'relative', width, height = '100px', 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.type === 'LOCAL' && option?.parentVariableType === '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 = width.endsWith('px') ? 40 : 32;
    const renderItem = (index) => {
        const option = optionsList[index];
        if (!option)
            return null;
        return (_jsx("div", { className: width.endsWith('px') ? 'ff-variable-option' : '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: 16, width: 16, hoverEffect: true })] })) : (_jsx(DynamicWidthTooltip, { option: option })) }, `${option.id}-${index}`));
    };
    return (_jsx("div", { className: cx('ff-variable-dropdown', position), style: dropdownPosition
            ? {
                top: dropdownPosition.top + 30,
                left: dropdownPosition.left - 30,
                width,
                height,
                zIndex,
            }
            : { width, height, zIndex }, children: !checkEmpty(optionsList) ? (_jsx(Virtuoso, { totalCount: optionsList.length, itemContent: renderItem, style: { height: '100%', fontSize: "12px" }, overscan: 10, fixedItemHeight: itemHeight })) : (_jsx("div", { className: "ff-variable-option", children: _jsx(Typography, { as: "span", fontSize: 12, children: "No Option" }) })) }));
};
export default VariableDropdown;
//# sourceMappingURL=VariableDropdown.js.map