import { Box, Flex, Paper, Text } from "@mantine/core";
import { IconLock, IconX } from "@tabler/icons-react";
import { DialogAttachmentProps } from "./DialogAttachment";
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { useDialog } from "@/app/providers/DialogProvider/useDialog";
import { useGroups } from "@/app/providers/DialogProvider/useGroups";


export function AttachAvatar (props : DialogAttachmentProps) {
    const colors = useRosettaColors();
    const {dialog} = useDialog();
    const {hasGroup} = useGroups();

    return (
        <Paper withBorder p={'sm'} style={{
            width: '100%',
            position: 'relative'
        }}
         key={props.attach.id}>
            <Flex gap={'xs'}>
                <img style={{
                    width: 60,
                    height: 60,
                    borderRadius: '50%',
                    userSelect: 'none'
                }} src={props.attach.blob}>
                </img>
                <Flex direction={"column"} justify={"center"}>
                    <Flex direction={"row"} align={"center"} gap={5}>
                        <Text fw={500} fz={'sm'}>{hasGroup(dialog) ? 'Group' : 'Your'} avatar</Text>
                        <IconLock size={14} stroke={2} color={colors.success}></IconLock>
                    </Flex>
                    <Text fz={'xs'} c={'dimmed'}>
                        This avatar will be visible {hasGroup(dialog) ? 'to the group' : 'to your opponent'}.
                        All avatars are end-to-end encrypted.
                    </Text>
                </Flex>
            </Flex>
            {props.onRemove && 
                <Box bg={colors.error} style={{
                    position: 'absolute',
                    top: -5,
                    right: -5,
                    borderRadius: '50%',
                    cursor: 'pointer',
                    height: 18,
                    width: 18,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
                onClick={() => {
                    props.onRemove && props.onRemove(props.attach);
                }}>
                    <IconX size={13} stroke={2} color="white"></IconX>
                </Box>
            }
        </Paper>        
    );
}