import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { useDialog } from "@/app/providers/DialogProvider/useDialog";
import { Box, Flex, Paper, Transition } from "@mantine/core";
import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
import { useEffect, useRef, useState } from "react";

export interface DialogAffixProps {
    mounted: boolean;
    onClick: () => void;
}

export function DialogAffix(props : DialogAffixProps) {
    const {messages} = useDialog();
    const [updates, setUpdates] = useState(false);
    const colors = useRosettaColors();
    const lastMessageTimeRef = useRef(0);
    //const {isMentioned} = useMentions();
    //const {hasGroup} = useGroups();
    const mentionedAffix = false;

    useEffect(() => {
        if(!props.mounted){
            setUpdates(false);
        }
        if(messages.length === 0){
            return;
        }
        lastMessageTimeRef.current = messages[messages.length - 1].timestamp;
    }, [props.mounted]);

    useEffect(() => {
        if(!props.mounted || 
            (messages.length > 0 && lastMessageTimeRef.current >= messages[messages.length - 1].timestamp)
        ){
            return;
        }
        setUpdates(true);
    }, [messages]);

    return (
        <Transition transition="slide-up" mounted={props.mounted}>
        {(transitionStyles) => (
            <Paper withBorder pos={'absolute'} bottom={20} right={20} style={{
                ...transitionStyles,
                cursor: 'pointer'
            }} 
            radius={35} h={35} w={35} onClick={props.onClick} 
            >
                <Transition transition={'scale'} mounted={updates || mentionedAffix}>
                    {(transitionStyles) => (
                        <Box pos={'absolute'} 
                            h={11} 
                            w={11} 
                            right={-3}
                            top={-3}
                            style={{
                                borderRadius: 12,
                                ...transitionStyles
                            }} 
                            bg={mentionedAffix ? colors.brandColor : colors.error}>
                        </Box>
                    )}
                </Transition>
                <Flex h={'100%'} w={'100%'} align={'center'} justify={'center'}>
                    {!mentionedAffix && <IconArrowDown color={'var(--mantine-color-gray-6)'} size={16} />}
                    {mentionedAffix && <IconArrowUp color={'var(--mantine-color-gray-6)'} size={16} />}
                </Flex>
            </Paper>
        )}
        </Transition>        
    );
}