import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { ProtocolState } from "@/app/providers/ProtocolProvider/ProtocolProvider";
import { useProtocolState } from "@/app/providers/ProtocolProvider/useProtocolState";
import { Flex, Loader, Text } from "@mantine/core";

export function DialogHeaderText() {
    const [protocolState] = useProtocolState();
    const colors = useRosettaColors();

    const headerType = () => {
        switch(protocolState){
            case ProtocolState.SYNCHRONIZATION:
                return (<>
                    <Loader size={12} color={colors.chevrons.active}></Loader>
                    <Text fw={500} style={{
                        userSelect: 'none'
                    }} size={'sm'}>Updating...</Text>
                </>);
            case ProtocolState.CONNECTED:
                return (<>
                    <Text fw={500} style={{
                        userSelect: 'none'
                    }} size={'sm'}>Chats</Text>
                </>);
            default:
                return (<>
                    <Text fw={500} style={{
                        userSelect: 'none'
                    }} size={'sm'}>Chats</Text>
                </>);
        }
    }

    return (
        <Flex direction={'row'} align={'center'} gap={'xs'}>
            {headerType()}
        </Flex>
    )
}