import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import LoopIcon from '@mui/icons-material/Loop';

import { AnimatedIcon, LoadingButton } from 'components';
import { useSendMagicLink, useWidget } from 'hooks';

export const EmailVerify = () => {
	const { loginHint, goTo } = useWidget();
	const { mutate: sendMagicLink, isLoading } = useSendMagicLink();

	const handleSubmit: React.MouseEventHandler<HTMLButtonElement> = () =>
		sendMagicLink({ email: loginHint, resend: true });

	return (
		<>
			<Stack sx={{ width: '100%' }} rowGap={3}>
				<AnimatedIcon width='164px' />
				<Typography textAlign='center'>
					A login link has been sent to{' '}
					{loginHint || 'your email address'}.
				</Typography>
			</Stack>
			<Stack spacing={2} sx={{ width: '100%' }}>
				<LoadingButton
					variant='contained'
					size='large'
					fullWidth
					disabled={isLoading}
					loading={isLoading}
					onClick={handleSubmit}
					endIcon={<LoopIcon />}
				>
					Resend
				</LoadingButton>
				<Box
					sx={{
						display: 'flex',
						justifyContent: 'center',
						alignItems: 'center',
					}}
				>
					<Button
						variant='text'
						disableFocusRipple
						disableTouchRipple
						disableRipple
						size='small'
						component='a'
						onClick={() => goTo('email')}
						sx={{
							m: 0,
							p: 0,
						}}
					>
						Start Over
					</Button>
				</Box>
			</Stack>
		</>
	);
};
