import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';

interface WikiLinkListProps {
    items: any[];
    command: (item: any) => void;
}

const WikiLinkList = forwardRef((props: WikiLinkListProps, ref) => {
    const [selectedIndex, setSelectedIndex] = useState(0);

    const selectItem = (index: number) => {
        const item = props.items[index];

        if (item) {
            // If it's a "Create new" item, use the original term as the label
            const label = item.isNew ? item.originalTerm : item.title;
            props.command({ id: item.id, label: label });
        }
    };

    const upHandler = () => {
        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
    };

    const downHandler = () => {
        setSelectedIndex((selectedIndex + 1) % props.items.length);
    };

    const enterHandler = () => {
        selectItem(selectedIndex);
    };

    useEffect(() => {
        setSelectedIndex(0);
    }, [props.items]);

    useImperativeHandle(ref, () => ({
        onKeyDown: ({ event }: { event: KeyboardEvent }) => {
            if (event.key === 'ArrowUp') {
                upHandler();
                return true;
            }

            if (event.key === 'ArrowDown') {
                downHandler();
                return true;
            }

            if (event.key === 'Enter') {
                enterHandler();
                return true;
            }

            return false;
        },
    }));

    return (
        <div className="bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden min-w-[200px]">
            {props.items.length ? (
                props.items.map((item, index) => (
                    <button
                        key={index}
                        className={`w-full text-left px-4 py-2 text-sm ${index === selectedIndex
                            ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100'
                            : 'hover:bg-neutral-100 dark:hover:bg-neutral-700 text-neutral-800 dark:text-neutral-200'
                            }`}
                        onClick={() => selectItem(index)}
                    >
                        {item.title}
                    </button>
                ))
            ) : (
                <div className="px-4 py-2 text-sm text-neutral-500 dark:text-neutral-400">
                    No results
                </div>
            )}
        </div>
    );
});

WikiLinkList.displayName = 'WikiLinkList';

export default WikiLinkList;