import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
import { useAvatarChange } from "@/app/providers/AvatarProvider/useChangeAvatar";
import { useImageViewer } from "@/app/providers/ImageViewerProvider/useImageViewer";
import { imagePrepareForNetworkTransfer } from "@/app/utils/utils";
import { Avatar, Box, Flex, Overlay } from "@mantine/core";
import { useFileDialog } from "@mantine/hooks";
import { IconCamera } from "@tabler/icons-react";
import { useState } from "react";

interface ActionAvatarProps {
    title: string;
    publicKey: string;
    forceChangeable?: boolean;
}

export function ActionAvatar(props : ActionAvatarProps) {
    const [overlay, setOverlay] = useState(false);
    const publicKey = usePublicKey();
    const changeAvatar = useAvatarChange();
    const avatars = useAvatars(props.publicKey, true);
    const {open} = useImageViewer();

    const fileDialog = useFileDialog({
        multiple: false,
        accept: 'image/*',
        onChange: async (files) => {
            if(!files){
                return;
            }
            if(files.length == 0){
                return;
            }
            const file = files[0];
            const base64Image = await imagePrepareForNetworkTransfer(file);
            changeAvatar(base64Image, props.publicKey);
        }
    });

    const onClickAvatar = () => {
        if(props.publicKey != publicKey && !props.forceChangeable){
            open(avatars.map(a => ({src: a.avatar, timestamp: a.timestamp})), 0);
            return;
        }
        fileDialog.open();
    }

    return (
        <Flex align={'center'} justify={'center'}>
            <Box
            w={120} h={120}
            onMouseEnter={() => setOverlay(true)}
            onMouseLeave={() => setOverlay(false)} 
            style={{
                cursor: 'pointer'
            }}
            onClick={onClickAvatar}
            pos={'relative'}>
                <Avatar
                    size={120}
                    radius={120}
                    mx="auto"
                    name={props.title.trim() || props.publicKey}
                    color={'initials'}
                    src={avatars.length > 0 ? 
                        avatars[0].avatar
                        : undefined}
                >
                </Avatar>
                {(overlay && (props.publicKey == publicKey || props.forceChangeable)) && <Overlay zIndex={99} radius={120}>
                    <Flex align={'center'} justify={'center'} h={'100%'} gap={5} opacity={0.8}>
                        <IconCamera stroke={2} color="white" size={40}></IconCamera>
                    </Flex>
                </Overlay>}
            </Box>
        </Flex>
    );
}