import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
import { KeyImage } from "@/app/components/KeyImage/KeyImage";
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { Button, Flex, Text, Tooltip, useMantineTheme } from "@mantine/core";
import { IconChevronLeft, IconLock } from "@tabler/icons-react";
import { useNavigate, useParams } from "react-router-dom";

export function GroupEncryption() {
    const params = useParams();
    const encryptKey = params.key!;
    const theme = useMantineTheme();
    const colors = useRosettaColors();
    const navigate = useNavigate();

    const translateStringToHex = (str: string) => {
        return str.split('').map(c => {
            /*
                XOR for prevent share keys
            */
            const hex = (c.charCodeAt(0) ^ 27).toString(16);
            return hex.length === 1 ? '0' + hex : hex;
        }).join(' ');
    }

    return (<>
        <Breadcrumbs text={"Encryption key"}></Breadcrumbs>
        <InternalScreen>
            <Flex align={'center'} justify={'center'}>
                <KeyImage radius={0} colors={[
                    theme.colors.blue[1],
                    theme.colors.blue[2],
                    theme.colors.blue[3],
                    theme.colors.blue[4],
                    theme.colors.blue[5]
                ]} size={180} keyRender={encryptKey}></KeyImage>                
            </Flex>
            <Flex align={'center'} style={{
                userSelect: 'none'
            }} direction={'column'} mt={'sm'} justify={'center'}>
                <Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
                    translateStringToHex(encryptKey.substring(0, 16))
                }</Text>
                <Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
                    translateStringToHex(encryptKey.substring(16, 32))
                }</Text>
                <Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
                    translateStringToHex(encryptKey.substring(32, 48))
                }</Text>   
                <Text ta="center" c={'dimmed'} ff={'monospace'} fz={'xs'} fw={500}>{
                    translateStringToHex(encryptKey.substring(48, 64))
                }</Text>              
            </Flex>
            <Flex align={'center'} direction={'column'} mt={'sm'}>
                <Flex direction={'row'} gap={5} align={'center'}>
                    <Text fw={500} fz={'sm'}>
                        Your messages is secure
                    </Text>
                    <Tooltip withArrow label="Secure and store only on your device.">
                        <IconLock size={16} color={colors.success}></IconLock>
                    </Tooltip>
                </Flex>
                <Text ta="center" maw={350} mt={'sm'} c={'dimmed'} fz={'xs'}>
                    This key is used to encrypt and decrypt messages. Your messages is secure and not stored on our servers.
                </Text>
            </Flex>
            <Flex>
                <Button onClick={() => navigate(-1)} leftSection={
                    <IconChevronLeft size={16}></IconChevronLeft>
                } fullWidth mt={'md'} variant={'subtle'} color="blue">Back</Button>
            </Flex>
        </InternalScreen>
    </>)
}