import { PrivateView } from "@/app/components/PrivateView/PrivateView";
import { ProtocolState } from "@/app/providers/ProtocolProvider/ProtocolProvider";
import { useProtocolState } from "@/app/providers/ProtocolProvider/useProtocolState";
import { Flex, Text } from "@mantine/core";
import Lottie from "lottie-react";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import animationData from './inbox.json'
import { AnimatedButton } from "@/app/components/AnimatedButton/AnimatedButton";
import { useLogout } from "@/app/providers/AccountProvider/useLogout";

export function DeviceConfirm() {
    const protocolState = useProtocolState();
    const navigate = useNavigate();
    const logout = useLogout();

    useEffect(() => {
        if(protocolState == ProtocolState.CONNECTED) {
            navigate('/main');
        }
    }, [protocolState]);
 
    return (
        <PrivateView> 
            <Flex h={500} justify={'space-between'} align={'center'} direction={'column'}>
                <Flex maw={380} direction={'column'} align={'center'} mt={'xl'}>
                    <Flex>
                        <Lottie style={{
                            width: 140,
                            height: 140
                        }} animationData={animationData}></Lottie>
                    </Flex>
                    <Flex mt={'xl'}>
                        <Text fw={500} fz={18}>
                            Confirm new device
                        </Text>
                    </Flex>
                    <Flex mt={'sm'} px={'lg'} justify={'center'}>
                        <Text ta={'center'} c={'dimmed'} fz={14}>
                            To confirm this device, please check your first device attached to your account and approve the new device.
                        </Text>
                    </Flex>
                    <Flex mt={'xl'} px={'lg'} w={'100%'} justify={'center'}>
                        <AnimatedButton onClick={() => {
                            logout();
                        }} variant="light" color="white" radius={'xl'} fullWidth animated={['#e03131', '#ff5656']}>Exit</AnimatedButton>
                    </Flex>                    
                </Flex>
                <Flex justify={'center'} mt={'xl'} px={'lg'} align={'center'}>
                    <Flex justify={'center'} gap={'sm'} align={'center'}>
                        <Text ta={'center'} c={'dimmed'} fz={12}>
                            Confirm device <strong>{window.deviceName}</strong> on your first device to loading your chats.
                        </Text>
                    </Flex>
                </Flex>
            </Flex>
        </PrivateView>
    )
}