import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { Popover, Text } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconArrowBadgeDownFilled, IconRosetteDiscountCheckFilled, IconShieldCheckFilled } from "@tabler/icons-react";

interface VerifiedBadgeProps {
    verified: number;
    size?: number;
    hideTooltip?: boolean;
    color?: string;
}

export function VerifiedBadge(props : VerifiedBadgeProps) {
    const colors = useRosettaColors();
    const [opened, { close, open }] = useDisclosure(false);
    return (
        <>
        {props.verified == 1 && <>
            <Popover width={200} opened={!props.hideTooltip && opened} position="bottom" withArrow arrowOffset={18}>
                <Popover.Target>
                    <IconRosetteDiscountCheckFilled onMouseEnter={open} onMouseLeave={close} size={props.size || 21} color={props.color ? props.color : colors.brandColor}></IconRosetteDiscountCheckFilled>
                </Popover.Target>
                <Popover.Dropdown>
                    <Text size="xs" c={'dimmed'}>
                        This is an official account belonging to a public figure, brand, or organization.
                    </Text>
                </Popover.Dropdown>
            </Popover> 
        </>}
        {props.verified == 2 && <>
            <Popover width={200} opened={!props.hideTooltip && opened} position="bottom" withArrow arrowOffset={18}>
                <Popover.Target>
                    <IconShieldCheckFilled onMouseEnter={open} onMouseLeave={close} size={props.size || 21} color={props.color ? props.color : colors.success}></IconShieldCheckFilled>
                </Popover.Target>
                <Popover.Dropdown>
                    <Text size="xs" c={'dimmed'}>
                        This is official account belonging to administration of Rosetta.
                    </Text>
                </Popover.Dropdown>
            </Popover>             
        </>}
        {props.verified == 3 && <>
            <Popover width={200} opened={!props.hideTooltip && opened} withArrow>
                <Popover.Target>
                    <IconArrowBadgeDownFilled onMouseEnter={open} onMouseLeave={close} size={props.size || 21} color={props.color ? props.color : colors.brandColor}></IconArrowBadgeDownFilled>
                </Popover.Target>
                <Popover.Dropdown>
                    <Text size="xs" c={'dimmed'}>
                        This user is administrator of this group. 
                    </Text>
                </Popover.Dropdown>
            </Popover>      
        </>}
        </>
    )
}