import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { Box, Flex, Loader, Text } from "@mantine/core";
import classes from './Topbar.module.css'
import { useProtocolState } from "@/app/providers/ProtocolProvider/useProtocolState";
import { ProtocolState } from "@/app/providers/ProtocolProvider/ProtocolProvider";
import { WindowsFrameButtons } from "../WindowsFrameButtons/WindowsFrameButtons";
import { MacFrameButtons } from "../MacFrameButtons/MacFrameButtons";

export function Topbar() {
    const colors = useRosettaColors();
    const protocolState = useProtocolState(); 


    return (
        <Box className={classes.drag} ta={'center'} p={3} bg={colors.mainColor}>
            {window.platform == 'win32' && <WindowsFrameButtons></WindowsFrameButtons>}
            {window.platform == 'darwin' && <MacFrameButtons></MacFrameButtons>}
            {window.platform == 'linux' && <WindowsFrameButtons></WindowsFrameButtons>}
            {(protocolState == ProtocolState.CONNECTED || !window.location.hash.includes("main")) && 
                <Flex align={'center'} justify={'center'}>
                    <Text fw={'bolder'} fz={13} c={'gray'}>
                        Rosetta Messenger
                    </Text>
                </Flex>
            }
            {(protocolState != ProtocolState.CONNECTED && protocolState != ProtocolState.DEVICE_VERIFICATION_REQUIRED && window.location.hash.includes("main")) && 
                <Flex align={'center'} gap={5} justify={'center'}>
                    <Loader size={12} color={colors.chevrons.active}></Loader>
                    <Text fw={'bolder'} fz={13} c={'gray'}>
                        Connecting...
                    </Text>
                </Flex>
            }
            {(protocolState == ProtocolState.DEVICE_VERIFICATION_REQUIRED && window.location.hash.includes("main")) && 
                <Flex align={'center'} gap={5} justify={'center'}>
                    <Text fw={'bolder'} fz={13} c={'gray'}>
                        Device verification required
                    </Text>
                </Flex>
            }
        </Box>
    )
}