import { useState, useRef, useEffect } from 'react';
import { Pressable, Text, View } from 'react-native';
import { Input, type MentionSuggestionsProps } from 'react-native-headless-mention';

const suggestions = [
    { id: '1', name: 'Parbez' },
    { id: '2', name: 'Voxelli' },
    { id: '3', name: 'Sho' },
    { id: '4', name: 'Hound' },
    { id: '5', name: 'Sarcaster' },
];

const renderSuggestions = ({ keyword, onSuggestionPress }: MentionSuggestionsProps) => {
    if (!keyword) return null;

    return (
        <View>
            {suggestions
                .filter((one) => one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()))
                .map((one) => (
                    <Pressable key={one.id} onPress={() => onSuggestionPress(one)} style={{ padding: 12 }}>
                        <Text>{one.name}</Text>
                    </Pressable>
                ))}
        </View>
    );
};

export default function Campaigns() {
    const [value, setValue] = useState('');
    const inputRef = useRef(null);

    useEffect(() => {
        console.log(value);
    }, [value]);

    return (
        <Input
            inputRef={inputRef}
            onChange={setValue}
            partTypes={[
                {
                    trigger: '@',
                    renderSuggestions,
                    textStyle: { fontWeight: 'bold', color: 'blue' },
                    getLabel(mention) {
                        const { name } = suggestions.find((one) => one.id === mention.id) ?? { name: mention.id };
                        return `@${name}`;
                    },
                    pattern: /<(?<trigger>@)(?<id>\d+)>/g,
                },
            ]}
            value={value}
        />
    );
}