/**
 * Autocomplete Dropdown
 * Ball Studios <https://git.balls.studio>
 */

import React from 'react';

interface Suggestion {
    command: string;
    description: string;
    plugin: string;
    dangerous: boolean;
}

interface Props {
    suggestions: Suggestion[];
    selectedIndex: number;
    onSelect: (sug: Suggestion) => void;
}

export default function AutocompleteDropdown({ suggestions, selectedIndex, onSelect }: Props) {
    return (
        <ul className='addon-autocomplete-dropdown' role='listbox'>
            {suggestions.map((sug, i) => (
                <li
                    key={sug.command}
                    className={`addon-autocomplete-item ${i === selectedIndex ? 'active' : ''} ${sug.dangerous ? 'danger' : ''}`}
                    role='option'
                    aria-selected={i === selectedIndex}
                    onClick={() => onSelect(sug)}
                    onMouseDown={e => e.preventDefault()} // prevent blur
                >
                    <span className='addon-ac-command'>/{sug.command}</span>
                    {sug.dangerous && <span className='addon-ac-danger-badge'>⚠ Danger</span>}
                    <span className='addon-ac-desc'>{sug.description}</span>
                    <span className='addon-ac-plugin'>{sug.plugin}</span>
                </li>
            ))}
        </ul>
    );
}