import { jsx as _jsx } from "react/jsx-runtime";
import './MentionUser.scss';
import { useCallback, useEffect, useRef, useState } from 'react';
import Typography from '../../Typography';
const MentionUser = ({ hasAtSymbol, usersObj, optionClicked, charsAfterAt, mentionUserRef, }) => {
    const [hoveredIndex, setHoveredIndex] = useState(0);
    const itemRefs = useRef([]);
    if (!hasAtSymbol)
        return null;
    const filteredUsers = usersObj.filter((option) => charsAfterAt
        ? option.name.toLowerCase().startsWith(charsAfterAt.toLowerCase())
        : true);
    useEffect(() => {
        setHoveredIndex(0);
    }, [charsAfterAt]);
    const handleKeyDown = useCallback((event) => {
        if (!hasAtSymbol || filteredUsers.length === 0)
            return;
        switch (event.key) {
            case 'ArrowDown':
                event.preventDefault();
                setHoveredIndex((prevIndex) => (prevIndex + 1) % filteredUsers.length);
                break;
            case 'ArrowUp':
                event.preventDefault();
                setHoveredIndex((prevIndex) => prevIndex === 0 ? filteredUsers.length - 1 : prevIndex - 1);
                break;
            case 'Enter':
                event.preventDefault();
                const selectedUser = filteredUsers[hoveredIndex];
                if (selectedUser) {
                    optionClicked(selectedUser.name, selectedUser.emailId);
                }
                break;
            default:
                break;
        }
    }, [filteredUsers, hoveredIndex, hasAtSymbol, optionClicked]);
    useEffect(() => {
        if (itemRefs.current[hoveredIndex]) {
            itemRefs.current[hoveredIndex]?.scrollIntoView({
                behavior: 'smooth',
                block: 'nearest',
            });
        }
    }, [hoveredIndex]);
    useEffect(() => {
        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, [handleKeyDown]);
    return (_jsx("div", { className: "select-section", onMouseDown: (e) => e.preventDefault(), children: _jsx("div", { className: "select-group", ref: mentionUserRef, children: filteredUsers.length ? (filteredUsers.map((option, index) => (_jsx("div", { ref: (name) => (itemRefs.current[index] = name), className: `mention-option ${index === hoveredIndex ? 'hovered' : ''}`, onClick: () => optionClicked(option.name, option.emailId), onMouseDown: (e) => e.preventDefault(), children: _jsx(Typography, { children: option.name }) }, option.id)))) : (_jsx("div", { className: "user-not-found", children: _jsx(Typography, { children: "No user name found" }) })) }) }));
};
export default MentionUser;
//# sourceMappingURL=MentionUser.js.map