import { Box, Flex, Text } from "@mantine/core";
import { DialogAttachmentProps } from "./DialogAttachment";
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { IconFile, IconFileTypeJpg, IconFileTypeJs, IconFileTypePng, IconFileTypeZip, IconX } from "@tabler/icons-react";
import { dotCenterIfNeeded, humanFilesize } from "@/app/utils/utils";

export function AttachFile(props : DialogAttachmentProps) {
    const colors = useRosettaColors();
    const filesize = parseInt(props.attach.preview.split("::")[0]);
    const filename = props.attach.preview.split("::")[1];
    const filetype = filename.split(".")[filename.split(".").length - 1];

    const getIconByFiletype = (type : string) : React.ReactNode => {
        type = type.trim().toLocaleLowerCase();
        const iconAttributes = {
            size: 23,
            color: colors.chevrons.active
        }
        switch(type){
            case 'js':
                return <IconFileTypeJs {...iconAttributes}></IconFileTypeJs>
            case 'jpeg':
                return <IconFileTypeJpg {...iconAttributes}></IconFileTypeJpg>
            case 'jpg':
                return <IconFileTypeJpg {...iconAttributes}></IconFileTypeJpg>
            case 'png':
                return <IconFileTypePng {...iconAttributes}></IconFileTypePng>
            case 'zip':
                return <IconFileTypeZip {...iconAttributes}></IconFileTypeZip>
            case '7z':
                return <IconFileTypeZip {...iconAttributes}></IconFileTypeZip>
            default:
                return <IconFile {...iconAttributes}></IconFile>
        }
    }

    const icon = getIconByFiletype(filetype);

    return (
        <Box style={{
            minWidth: 100,
            minHeight: 70,
            position: 'relative',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            border: '1px solid ' + colors.borderColor,
            borderRadius: 8,
            backgroundColor: colors.boxColor,
            flexDirection: 'row',
            gap: 4
        }}
         key={props.attach.id}>
            {icon}
            <Flex direction={'column'} gap={4}>
                <Text size={'xs'} c={colors.chevrons.active}>
                    {dotCenterIfNeeded(filename, 10)}
                </Text>                
                <Text size={'xs'} c={colors.chevrons.active}>
                    {humanFilesize(filesize)}
                </Text>
            </Flex>
            
            {props.onRemove && 
                <Box bg={colors.brandColor} 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>
            }
        </Box>  
    );
}