import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { useDeviceResolve } from "@/app/providers/DeviceProvider/useDeviceResolve";
import { DeviceEntry } from "@/app/providers/ProtocolProvider/protocol/packets/packet.device.list";
import { Box, Button, Divider, Flex, Text } from "@mantine/core";
import { modals } from "@mantine/modals";

export interface DeviceVerifyProps {
    device: DeviceEntry;
}

export function DeviceVerify(props: DeviceVerifyProps) {
    const colors = useRosettaColors();
    const { accept, decline } = useDeviceResolve();

    const acceptConfirmModal = () => {
        modals.openConfirmModal({
            title: 'Accept new device',
            children: (
                <Text size="sm">
                    Are you sure you want to accept this device? This will allow it to access your account.
                </Text>
            ),
            centered: true,
            labels: { confirm: 'Accept', cancel: 'Cancel' },
            cancelProps: { color: 'gray', style: {
                outline: 'none'
            } },
            onConfirm: () => accept(props.device.deviceId),
        });
    }

    return (
        <Box bg={colors.mainColor} h={65}>
            <Divider orientation={'horizontal'} color={colors.borderColor}></Divider>
            <Flex mt={'xs'} mb={'xs'} align={'center'} direction={'column'}>
                <Text size={'xs'} fw={500} c={'dimmed'}>
                    New login from {props.device.deviceName} ({props.device.deviceOs})
                </Text>
                <Flex direction={'row'} mt={'xs'} gap={'md'}>
                    <Button p={0} h={18} onClick={acceptConfirmModal} variant={'transparent'} size={'xs'}>Accept</Button>
                    <Button p={0} h={18} onClick={() => decline(props.device.deviceId)} variant={'transparent'} size={'xs'} color={'red'}>Decline</Button>
                </Flex>
            </Flex>            
        </Box>
    );
}