import { useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form';
import AuthService from '../../services/AuthService';
import { IconCheck } from '@tabler/icons-react';
import { Button, Input, Spinner, Text } from '@fluentui/react-components';

interface PasswordResetProps {
    email: string;
}

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

    const { register, handleSubmit, watch, setError, formState: { 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 (
        <div style={{
            display: 'flex',
            margin: 'auto',
            flexDirection: 'column',
            gap: '1rem',
            maxWidth: '400px',
            width: '100%',
            height: 'min-content',
            borderRadius: '1rem',
            border: '1px solid #00000030',
            padding: '2rem',
            background: 'var(--colorNeutralBackground1)'
        }}>
            <Text size={600} weight='medium'>
                Восстановление пароля
            </Text>

            <form onSubmit={handleSubmit(onSubmit)}>
                {!success &&
                    <div style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '1rem'
                    }}>
                        <Text>
                            Введите адрес электронной почты, на который будут отправлены новые данные для авторизации:
                        </Text>

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

                        <div style={{
                            display: 'flex',
                            width: '100%',
                            justifyContent: 'space-between'
                        }}>
                            <Button type="submit" disabled={isSubmitting || watch('email').length == 0} appearance='primary'>
                                {isSubmitting ? <Spinner /> : 'Восстановить пароль'}
                            </Button>

                            <Button as='a' href="/auth/signin" type="button" appearance='subtle'>
                                Назад
                            </Button>
                        </div>

                    </div>
                }
                {success &&
                    <div style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '1rem'
                    }}>
                        <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: '1rem'
                        }}>
                            <IconCheck />
                            <Text>
                                На указанный адрес было отправлено письмо с новыми данными для авторизации.
                            </Text>
                        </div>
                        <div style={{ display: 'flex' }}>
                            <Button as='a' href="/auth/signin" type="button">
                                Войти
                            </Button>
                        </div>
                    </div>
                }
            </form>
        </div>
    )
}

export default PasswordReset