import { useRosettaBreakpoints } from "@/app/hooks/useRosettaBreakpoints";
import { useGroupInviteStatus } from "@/app/providers/DialogProvider/useGroupInviteStatus";
import { useGroups } from "@/app/providers/DialogProvider/useGroups";
import { GroupStatus } from "@/app/providers/ProtocolProvider/protocol/packets/packet.group.invite.info";
import { Avatar, Button, Flex, Paper, Skeleton, Text } from "@mantine/core";
import { IconBan, IconCheck, IconLink, IconPlus, IconX } from "@tabler/icons-react";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export interface GroupInviteMessageProps {
    groupInviteCode: string;
}

export function GroupInviteMessage(props: GroupInviteMessageProps) {
    const {parseGroupString, prepareForRoute, joinGroup, loading} = useGroups();
    const [groupInfo, setGroupInfo] = useState({
        groupId: '',
        title: '',
        description: '',
        encryptKey: '' 
    });
    const {inviteStatus} = 
        useGroupInviteStatus(groupInfo.groupId);
    const colorStatus = (
        inviteStatus === GroupStatus.NOT_JOINED ? 'blue' :
        inviteStatus === GroupStatus.JOINED ? 'green' :
        'red'
    );
    const navigate = useNavigate();
    const {lg} = useRosettaBreakpoints();

    useEffect(() => {
        initGroupInfo();
    }, [props.groupInviteCode]);

    const initGroupInfo = async () => {
        const info = await parseGroupString(props.groupInviteCode);
        if(!info){
            setGroupInfo({
                groupId: 'Invalid',
                title: 'Invalid',
                description: 'Invalid',
                encryptKey: ''
            });
            return;
        }
        setGroupInfo(info);
    }

    const onClickButton = async () => {
        if(inviteStatus === GroupStatus.NOT_JOINED){
            await joinGroup(props.groupInviteCode);
            return;
        }
        if(inviteStatus === GroupStatus.JOINED){
            navigate(`/main/chat/${prepareForRoute(groupInfo.groupId)}`);
            return;
        }
    }

    return (
        <>
            {groupInfo.groupId === '' && (
                <Skeleton miw={200} height={100} mt={'xs'} p={'sm'} />
            )}
            {groupInfo.groupId != '' && (
                <Paper withBorder mt={'xs'} p={'sm'}>
                    <Flex align={'center'} gap={'md'}>
                        {lg && (
                            <Avatar size={50} bg={colorStatus}>
                                <IconLink color={'white'} size={25} />
                            </Avatar>
                        )}
                        <Flex direction={'column'}>
                            <Text w={150} fz={13} c={colorStatus} fw={500}>{groupInfo.title}</Text>
                            <Text fz={10} c={'gray'}>
                                {inviteStatus === GroupStatus.NOT_JOINED && "Invite to join in this group."}
                                {inviteStatus === GroupStatus.JOINED && "You are already a member of this group."}
                                {inviteStatus === GroupStatus.INVALID && "This group invite is invalid."}
                                {inviteStatus === GroupStatus.BANNED && "You are banned in this group."}
                            </Text>
                            {inviteStatus === GroupStatus.NOT_JOINED && (
                                <Button loading={loading} onClick={onClickButton} leftSection={
                                    <IconPlus size={14} />
                                } mt={'xs'} variant={'light'} size={'compact-xs'}>Join Group</Button>
                            )}
                            {inviteStatus === GroupStatus.JOINED && (
                                <Button loading={loading} onClick={onClickButton} leftSection={
                                    <IconCheck size={14} />
                                } mt={'xs'} variant={'light'} color={'green'} size={'compact-xs'}>In group</Button>
                            )}
                            {inviteStatus === GroupStatus.INVALID && (
                                <Button loading={loading} onClick={onClickButton} leftSection={
                                    <IconX size={14} />
                                } mt={'xs'} variant={'light'} color={'red'} size={'compact-xs'}>Invalid</Button>
                            )}
                            {inviteStatus === GroupStatus.BANNED && (
                                <Button loading={loading} onClick={onClickButton} leftSection={
                                    <IconBan size={14} />
                                } mt={'xs'} variant={'light'} color={'red'} size={'compact-xs'}>Banned</Button>                                
                            )}
                        </Flex>
                    </Flex>
                </Paper>
            )}
        </>
    );
}