import { useCalls } from "@/app/providers/CallProvider/useCalls";
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
import { Box, Flex, Loader, Text } from "@mantine/core";
import classes from "./ActiveCall.module.css";
import { CallState } from "@/app/providers/CallProvider/CallProvider";
import { IconMicrophone, IconMicrophoneOff, IconPhoneX, IconVolume, IconVolumeOff } from "@tabler/icons-react";
import { translateDurationToTime } from "@/app/providers/CallProvider/translateDurationTime";

export function ActiveCall() {
    const {activeCall, callState, duration, muted, sound, close, setMuted, setSound, setShowCallView} = useCalls();
    const [userInfo] = useUserInformation(activeCall);
    //const colors = useRosettaColors();

    if(activeCall == ""){
        return <></>
    }

    const getConnectingClass = () => {
        if(callState === CallState.CONNECTING 
            || callState === CallState.INCOMING 
            || callState === CallState.KEY_EXCHANGE 
            || callState === CallState.WEB_RTC_EXCHANGE){
            return classes.connecting;
        }
        if(callState === CallState.ACTIVE){
            return classes.active;
        }
        return "";
    }

    return (
        <>
            <Box py={4} style={{
                cursor: 'pointer'
            }} px={10} className={getConnectingClass()} onClick={() => setShowCallView(true)}>
                <Flex align={'center'} justify={'row'} gap={10}>
                    <Flex w={'100%'} justify={'space-between'} align={'center'}>
                        <Flex>
                            {!muted && (
                                <IconMicrophoneOff style={{
                                    cursor: 'pointer'
                                }} onClick={(e) => {
                                    e.stopPropagation();
                                    setMuted(true);
                                }} size={16} color={'#fff'}></IconMicrophoneOff>
                            )}
                            {muted && (
                                <IconMicrophone style={{
                                    cursor: 'pointer'
                                }} onClick={(e) => {
                                    e.stopPropagation();
                                    setMuted(false);
                                }} size={16} color={'#fff'}></IconMicrophone>
                            )}
                        </Flex>
                        <Flex justify={'center'} align={'center'} gap={'xs'}>
                            <Text fw={500} c={'#fff'} style={{
                                    userSelect: 'none'
                                }} fz={13}>{userInfo?.title || activeCall}</Text>
                            {callState === CallState.CONNECTING && (
                                <Loader type={'dots'} size={12} color="white"></Loader>
                            )}
                            {callState == CallState.ACTIVE && (
                                <Text fw={500} c={'#ffffff'} style={{
                                    userSelect: 'none'
                                }} fz={12}>{translateDurationToTime(duration)}</Text>
                            )}
                        </Flex>
                        <Flex gap={'xs'} align={'center'} justify={'center'}>
                            {sound && (
                                <IconVolumeOff style={{
                                    cursor: 'pointer'
                                }} size={16} onClick={(e) => {
                                    e.stopPropagation();
                                    setSound(false)
                                }} color={'#fff'}></IconVolumeOff>
                            )}
                            {!sound && (
                                <IconVolume style={{
                                    cursor: 'pointer'
                                }} size={16} onClick={(e) => {
                                    e.stopPropagation();
                                    setSound(true)
                                }} color={'#fff'}></IconVolume>
                            )}
                            <IconPhoneX style={{
                                cursor: 'pointer'
                            }} onClick={(e) => {
                                e.stopPropagation();
                                close();
                            }} size={16} color={'#fff'}></IconPhoneX>
                        </Flex>
                    </Flex>
                </Flex>
            </Box>
        </>
    );
}