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";
import { usePacket } from "@/app/providers/ProtocolProvider/usePacket";
import { PacketDeviceResolve, Solution } from "@/app/providers/ProtocolProvider/protocol/packets/packet.device.resolve";

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

    useEffect(() => {
        if(protocolState == ProtocolState.CONNECTED) {
            navigate('/main');
        }
    }, [protocolState]);

    usePacket(0x18, (packet : PacketDeviceResolve) => {
        /**
         * Если решение отклонено, то выходим из аккаунта
         */
        if(packet.getSolution() == Solution.DECLINE){
            logout();
        }
    }, []);
 
    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>
    )
}