import { useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form';
import AuthService from '../../services/AuthService';
import { Button, Flex, Loader, Paper, Text, TextInput, Transition } from '@mantine/core';
import { IconCheck } from '@tabler/icons-react';

interface PasswordResetProps {
    email: string;
}

function PasswordReset() {
    const [success, setSuccess] = useState(false)

    const { register, handleSubmit, watch, setError, formState: { errors, isSubmitting } } = useForm<PasswordResetProps>({
        defaultValues: {
            email: ''
        }
    })

    const onSubmit: SubmitHandler<PasswordResetProps> = async (data) => {
        await AuthService.resetPassword(data.email).then(response => {
            if (response.status === 200) {
                //setError('email', { message: response.data.msg })
                setSuccess(true)
            } else if (response.status === 422) {
                setError('email', { message: response.statusText })
            }
        }).catch((error: Error) => {
            setError('email', { message: error.message })
        })
    }

    return (
        <Paper flex={1} maw='500' withBorder radius='md' p='xl'>
            <Flex direction='column' gap='sm'>
                <Text size="xl" fw={500}>
                    Восстановление пароля
                </Text>

                <form onSubmit={handleSubmit(onSubmit)}>
                    {!success &&
                        <Transition mounted={!success} transition='fade'>
                            {(styles) =>
                                <Flex style={styles} direction='column' gap={'md'}>
                                    <Text>
                                        Введите адрес электронной почты, на который будут отправлены новые данные для авторизации:
                                    </Text>

                                    <TextInput
                                        label='E-mail'
                                        required
                                        {...register('email', { required: 'Введите E-mail' })}
                                        error={errors.email?.message}
                                    />

                                    <Flex gap='sm'>
                                        <Button flex={1} type="submit" disabled={isSubmitting || watch('email').length == 0} variant='filled'>
                                            {isSubmitting ? <Loader size={16} /> : 'Восстановить пароль'}
                                        </Button>

                                        <Button flex={1} component='a' href="/auth/signin" type="button" variant='light'>
                                            Назад
                                        </Button>
                                    </Flex>

                                </Flex>
                            }

                        </Transition>
                    }
                    {success &&
                        <Transition mounted={!success} transition='scale'>
                            {(styles) =>
                                <Flex style={styles} direction='column' gap='sm'>
                                    <Flex align='center' gap='sm'>
                                        <IconCheck />
                                        <Text>
                                            На указанный адрес было отправлено письмо с новыми данными для авторизации.
                                        </Text>
                                    </Flex>
                                    <Flex gap='sm'>
                                        <Button component='a' href="/auth/signin" type="button">
                                            Войти
                                        </Button>
                                    </Flex>
                                </Flex>
                            }
                        </Transition>
                    }
                </form>
            </Flex>
        </Paper>
    )
}

export default PasswordReset