import { useAttachment } from "@/app/providers/AttachmentProvider/useAttachment";
import { AttachmentProps } from "./MessageAttachments";
import { Avatar, Box, Flex, Text } from "@mantine/core";
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { IconPhoneOutgoing, IconX } from "@tabler/icons-react";
import { translateDurationToTime } from "@/app/providers/CallProvider/translateDurationTime";
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";

export function MessageCall(props: AttachmentProps) {
    const {
        getPreview,
        } = 
        useAttachment(
            props.attachment, 
            props.parent, 
        );
    const publicKey = usePublicKey();
    const preview = getPreview();
    const caller = props.parent.from == publicKey;
    const duration = parseInt(preview);
    const colors = useRosettaColors();
    const error = duration == 0;
    
    return (
        <Box p={'sm'} style={{
            background: colors.mainColor,
            border: '1px solid ' + colors.borderColor,
            borderRadius: 8,
            minWidth: 200,
            minHeight: 60
        }}>
            <Flex gap={'sm'} direction={'row'}>
                <Avatar bg={error ? colors.error : colors.brandColor} size={40}>
                    {!error && <>
                        {!caller && (
                            <IconPhoneOutgoing color={'white'} size={22}></IconPhoneOutgoing>
                        )}
                        {caller && (
                            <IconPhoneOutgoing color={'white'} size={22} style={{
                                transform: 'rotate(180deg)'
                            }}></IconPhoneOutgoing>
                        )}
                    </>}
                    {error && <>
                       <IconX color={'white'} size={22}></IconX> 
                    </>}
                </Avatar>
                <Flex direction={'column'} gap={5}>
                    <Text size={'sm'}>{
                        error ? (!caller ? "Missed call" : "Rejected call") : (!caller ? "Incoming call" : "Outgoing call")
                    }</Text>
                    {!error && 
                        <Text size={'xs'} c={colors.chevrons.active}>
                            {translateDurationToTime(duration)}
                        </Text>
                    }
                    {error && <Text size={'xs'} c={colors.error}>
                        Call was not answered or was rejected
                    </Text>}
                </Flex>
            </Flex>
        </Box>        
    );
}