import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { DeliveredMessageState } from "@/app/providers/DialogProvider/DialogProvider";
import { useImageViewer } from "@/app/providers/ImageViewerProvider/useImageViewer";
import { AspectRatio, Box, Flex, Loader, Overlay, Portal, Text } from "@mantine/core";
import { IconArrowDown, IconCircleX, IconFlameFilled } from "@tabler/icons-react";
import { useEffect, useRef, useState } from "react";
import { AttachmentProps } from "./MessageAttachments";
import { isMessageDeliveredByTime } from "@/app/utils/utils";
import { AnimatedRoundedProgress } from "../AnimatedRoundedProgress/AnimatedRoundedProgress";
import { ImageToView } from "@/app/providers/ImageViewerProvider/ImageViewerProvider";
import { DownloadStatus, useAttachment } from "@/app/providers/AttachmentProvider/useAttachment";
import { blurhashToBase64Image } from "@/app/workers/image/image";

export function MessageImage(props: AttachmentProps) {
    const colors = useRosettaColors();
    const {
        downloadPercentage,
        uploadedPercentage,
        download,
        downloadStatus,
        getBlob,
        getPreview } = useAttachment(props.attachment, props.parent);
    const mainRef = useRef<HTMLDivElement>(null);
    const error = downloadStatus == DownloadStatus.ERROR;
    const { open } = useImageViewer();
    const preview = getPreview();
    const [blob, setBlob] = useState(props.attachment.blob);
    const [loadedImage, setLoadedImage] = useState(false);
    const [blurhashPreview, setBlurhashPreview] = useState("");

    useEffect(() => {
        console.info(props.attachment);
        console.info("Consturcting image, download status: " + downloadStatus);
        constructBlob();
        constructFromBlurhash();
    }, [downloadStatus]);

    const constructBlob = async () => {
        let blob = await getBlob();
        setBlob(blob);
    }

    const openImageViewer = () => {
        const images: ImageToView[] = [{
            src: blob,
            caption: props.text,
            timestamp: props.timestamp
        }];

        open(images, 0);
    }

    const constructFromBlurhash = async () => {
        if (preview.length < 20) return;
        const blob = await blurhashToBase64Image(preview, 200, 220);
        setBlurhashPreview(blob);
    }

    const onClick = () => {
        if (downloadStatus == DownloadStatus.DOWNLOADED) {
            openImageViewer();
            return;
        }
        if (downloadStatus == DownloadStatus.NOT_DOWNLOADED) {
            download();
            return;
        }
    }
    return (
        <AspectRatio onClick={onClick} ref={mainRef} style={{
            minWidth: 200,
            minHeight: 220,
            maxWidth: 200,
            maxHeight: 220,
            borderRadius: 8,
            cursor: 'pointer',
            userSelect: 'none'
        }} pos={'relative'}>
            {blob != "" && (
                <img style={{
                    minHeight: 220,
                    width: '100%',
                    borderRadius: 8,
                    objectFit: 'cover',
                    backgroundColor: '#FFFFFF',
                    border: '1px solid ' + colors.borderColor,
                    display: loadedImage ? 'block' : 'none'
                }} src={blob} onLoad={() => setLoadedImage(true)}></img>)}
            {((downloadStatus == DownloadStatus.NOT_DOWNLOADED) || !loadedImage) && preview.length >= 20 && (
                <>
                    <img style={{
                        minHeight: 220,
                        width: '100%',
                        borderRadius: 8,
                        objectFit: 'cover',
                        border: '1px solid ' + colors.borderColor
                    }} src={blurhashPreview == "" ? undefined : blurhashPreview}></img>
                </>
            )}

            {(props.delivered == DeliveredMessageState.WAITING && uploadedPercentage > 0 && isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length)) &&
                <Portal target={mainRef.current!}>
                    <Flex direction={'column'} pos={'absolute'} justify={'center'} top={0} h={'100%'} align={'center'} gap={'xs'}>
                        <Box style={{
                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
                            borderRadius: 50,
                            height: 40,
                            width: 40,
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}>
                            <AnimatedRoundedProgress size={40} value={uploadedPercentage > 95 ? 95 : uploadedPercentage}></AnimatedRoundedProgress>
                        </Box>
                    </Flex>
            </Portal>}
            {props.delivered == DeliveredMessageState.WAITING && uploadedPercentage == 0 && isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length) &&
                <Portal target={mainRef.current!}>
                    <Flex direction={'column'} pos={'absolute'} justify={'center'} top={0} h={'100%'} align={'center'} gap={'xs'}>
                     <Box p={'xs'} style={{
                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
                        borderRadius: 8,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        gap: 4
                    }}>
                        <Loader size={15} type={'dots'} color={'white'}></Loader>
                        <Text size={'xs'} c={'white'}>
                            Encrypting...
                        </Text>
                    </Box>
                    </Flex>
            </Portal>}
            {downloadStatus == DownloadStatus.DECRYPTING && 
            <Portal target={mainRef.current!}>
                    <Flex direction={'column'} pos={'absolute'} justify={'center'} top={0} h={'100%'} align={'center'} gap={'xs'}>
                     <Box p={'xs'} style={{
                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
                        borderRadius: 8,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        gap: 4
                    }}>
                        <Loader size={15} type={'dots'} color={'white'}></Loader>
                        <Text size={'xs'} c={'white'}>
                            Decrypting...
                        </Text>
                    </Box>
                    </Flex>
            </Portal>}
            {(props.delivered == DeliveredMessageState.ERROR || (props.delivered != DeliveredMessageState.DELIVERED &&
                !isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length)
            )) && (
                    <Overlay center h={'100%'} radius={8} color="#000" opacity={0.85}>
                        <IconCircleX size={40} color={colors.error} />
                    </Overlay>
                )}

            {(downloadStatus == DownloadStatus.NOT_DOWNLOADED || downloadStatus == DownloadStatus.DOWNLOADING) && (<Flex direction={'column'} pos={'absolute'} top={0} justify={'center'} h={'100%'} align={'center'} gap={'xs'}>
                {!error && downloadStatus == DownloadStatus.DOWNLOADING && (
                    <Box style={{
                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
                        borderRadius: 50,
                        height: 40,
                        width: 40,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>
                        <AnimatedRoundedProgress size={40} value={Math.max(1, downloadPercentage)} color="white"></AnimatedRoundedProgress>
                    </Box>
                )}
                {!error && downloadStatus != DownloadStatus.DOWNLOADING && (
                    <Box style={{
                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
                        borderRadius: 50,
                        height: 40,
                        width: 40,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}>
                        <IconArrowDown size={25} color={'white'} />
                    </Box>
                )}
                {error && (
                    <Box p={'xs'} style={{
                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
                        borderRadius: 8,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        gap: 4
                    }}>
                        <Text size={'xs'} c={'white'}>
                            Image expired
                        </Text>
                        <IconFlameFilled size={15} style={{
                            fontSmooth: 'always'
                        }} color={'white'} />
                    </Box>
                )}
            </Flex>)}
        </AspectRatio>
    );
}
