import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import cx from 'classnames';
import './VariableSuggestionInputDropDown.scss';
import Typography from '../Typography';
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
import Tooltip from '../Tooltip';
import { isTextTruncated, truncateText, } from '../../utils/truncateText/truncateText';
const OptionsDropdown = ({ onSelectVariable, dropdownPosition, filteredOptions = [], position = 'relative', width = '100%', zIndex, truncateTextValue = 34, highlightedIndex, }) => {
    const highlightedRef = useRef(null);
    useEffect(() => {
        highlightedRef.current?.scrollIntoView({
            block: 'nearest',
        });
    }, [highlightedIndex]);
    return (_jsx("div", { className: cx(`ff-variable-dropdown-container ${position}`), style: dropdownPosition
            ? {
                top: dropdownPosition.top + 30,
                left: dropdownPosition.left - 30,
                width,
                zIndex,
            }
            : { width, zIndex }, children: !checkEmpty(filteredOptions) ? (filteredOptions?.map((option, index) => {
            return (_jsx("div", { className: cx('ff-variable-option', {
                    'ff-variable-option--highlighted': highlightedIndex === index,
                }), onMouseDown: () => onSelectVariable(option), ref: highlightedIndex === index ? highlightedRef : null, children: _jsx(Tooltip, { title: isTextTruncated(option?.name, truncateTextValue, 'pixel')
                        ? option?.name
                        : '', children: _jsx(Typography, { children: truncateText(option?.name, truncateTextValue, 'pixel') }) }) }, option?.id));
        })) : (_jsx("div", { className: "ff-variable-option no-data", children: _jsx(Typography, { as: "div", children: "No Option", fontSize: 14 }) })) }));
};
export default OptionsDropdown;
//# sourceMappingURL=OptionsDropdown.js.map