import { jsxs, jsx } from 'react/jsx-runtime';
import Typography from '../Typography/Typography.js';
import classNames from '../../_virtual/index.js';
import { truncateText, isTextTruncated } from '../../utils/truncateText/truncateText.js';
import Tooltip from '../Tooltip/Tooltip.js';

const OptionsDropdown = ({ onSelectVariable, dropdownPosition, filteredOptions = [], position = 'relative', width = '300px', zIndex = 1000, height = '160px', truncateTextValue = 34, isTruncateText = false, }) => {
    return (jsxs("div", { className: classNames('ff-variable-dropdown', position), style: dropdownPosition
            ? {
                top: dropdownPosition.top + 30,
                left: dropdownPosition.left - 30,
                width,
                zIndex,
            }
            : { width, zIndex, height: height }, children: [filteredOptions?.map((option) => {
                const displayText = isTruncateText
                    ? truncateText(option?.name, truncateTextValue, 'pixel')
                    : option?.name;
                const shouldShowTooltip = isTruncateText
                    ? isTextTruncated(option?.name, truncateTextValue, 'pixel')
                    : false;
                return (jsx("div", { className: "ff-variable-option", onClick: () => onSelectVariable(option), children: isTruncateText ? (jsx(Tooltip, { title: shouldShowTooltip ? option?.name : '', children: jsx(Typography, { children: displayText }) })) : (jsx(Typography, { children: displayText })) }, option?.id));
            }), filteredOptions?.length === 0 && (jsx("div", { className: "ff-variable-option .ff-variable-option-no-data ", children: jsx(Typography, { as: "span", fontSize: 14, children: "No Option" }) }))] }));
};

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