import { ActionIcon, Avatar, CopyButton, Flex, MantineSize, Text } from "@mantine/core";
import { SettingsPaper } from "../SettingsPaper/SettingsPaper";
import { IconCheck, IconCopy, IconLink } from "@tabler/icons-react";
import { useGroupInformation } from "@/app/providers/InformationProvider/useGroupInformation";
import { useGroups } from "@/app/providers/DialogProvider/useGroups";
import { useEffect, useState } from "react";
import { useRosettaColors } from "@/app/hooks/useRosettaColors";

export interface GroupInviteProps {
    groupId: string;
    mt?: MantineSize;
}

export function GroupInvite(props: GroupInviteProps) {
    const {groupInfo} = useGroupInformation(props.groupId);
    const {constructGroupString, getGroupKey} = useGroups();
    const [groupString, setGroupString] = useState<string>('');
    const colors = useRosettaColors();

    useEffect(() => {
        initGroupString();
    }, [props.groupId])

    const initGroupString = async () => {
        const groupKey = await getGroupKey(groupInfo.groupId);
        if(!groupKey){
            return;
        }
        const str = await constructGroupString(groupInfo.groupId, groupInfo.title, groupKey, groupInfo.description);
        setGroupString(str);
    }

    return (
        <SettingsPaper p={'xs'} mt={props.mt}>
            <Flex direction={'row'} justify={'space-between'} align={'center'} gap={'sm'}>
                <Flex align={'center'} gap={'md'}>
                    <Avatar size={45} color={'blue'}>
                        <IconLink size={25} />
                    </Avatar>
                    <Flex direction={'column'}>
                        <Text fz={13} c={colors.brandColor} fw={500}>Group Invite Code</Text>
                        <Text fz={10} c={'gray'}>Copy and share this invite code with any Rosetta users to the group.</Text>
                    </Flex>
                </Flex>
                <CopyButton value={groupString} timeout={1500}>
                    {({ copied, copy }) => (
                        <ActionIcon size={'lg'} component="span" color={copied ? 'teal' : 'blue'} variant="subtle" onClick={copy}>
                        {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
                        </ActionIcon>
                    )}
                </CopyButton>
            </Flex>
        </SettingsPaper>
    )
}