import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { Box, Divider, Flex } from "@mantine/core";
import { MentionRow } from "./MentionRow";
import React, { useState } from "react";
import { useHotkeys } from "@mantine/hooks";

export interface Mention {
    username: string;
    title: string;
    publicKey: string;
}

interface MentionListProps {
    mentions: Mention[];
    style?: React.CSSProperties;
    onSelectMention?: (mention: Mention) => void;
}

export function MentionList(props: MentionListProps) {
    const colors = useRosettaColors();
    const [selectedIndex, setSelectedIndex] = useState(-1);

    useHotkeys([
        ['ArrowDown', () => {
            if(props.mentions.length === 1){
                //setSelectedIndex(0);
                return;
            }
            setSelectedIndex((prev) => (prev + 1) % props.mentions.length);
        }],
        ['ArrowUp', () => {
            if(props.mentions.length === 1){
                //setSelectedIndex(0);
                return;
            }
            setSelectedIndex((prev) => (prev - 1 + props.mentions.length) % props.mentions.length);
        }],
        ['Enter', () => {
            if(props.mentions.length === 1){
                if(props.onSelectMention){
                    props.onSelectMention(props.mentions[0]);
                }
                return;
            }
            if(selectedIndex >= 0 && selectedIndex < props.mentions.length) {
                const mention = props.mentions[selectedIndex];
                if(props.onSelectMention){
                    props.onSelectMention(mention);
                }
            }
        }]
    ], [], true);  

    const onClick = (mention: Mention) => {
        if(props.onSelectMention){
            props.onSelectMention(mention);
        }
    } 

    return (
        <Box style={props.style} bg={colors.mainColor}>
            <Flex direction={'column'}>                        
                {props.mentions.map((mention, index) => (
                    <Box onClick={() => onClick(mention)} key={mention.publicKey}> 
                        <MentionRow selected={selectedIndex === index} {...mention}></MentionRow> 
                        {index < props.mentions.length - 1 && 
                            <Divider color={colors.borderColor}></Divider>
                        }
                    </Box>
                ))}
            </Flex>
        </Box>
    );
}