import { useForm, SubmitHandler } from 'react-hook-form';
import UserService from '../../services/UserService';
import { IUser } from '../../interfaces/user';
import { Button, Flex, Loader, Paper, Text, TextInput } from '@mantine/core';

const SignUp = () => {
    const { register, handleSubmit, formState: { errors, isValid, isSubmitting } } = useForm<IUser>({
        defaultValues: {
            email: '',
            login: '',
            phone: '',
            name: '',
            surname: '',
            is_active: true,
            password: '',
        }
    })


    const onSubmit: SubmitHandler<IUser> = async (data) => {
        try {
            await UserService.createUser(data)
        } catch (error) {
            console.error('Ошибка регистрации:', error);
        }
    };

    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)}>
                    <Flex direction='column' gap='sm'>
                        <TextInput
                            label='Email'
                            required
                            {...register('email', { required: 'Email обязателен' })}
                            error={errors.email?.message}
                        />

                        <TextInput
                            label='Логин'
                            required
                            {...register('login', { required: 'Логин обязателен' })}
                            error={errors.login?.message}
                        />

                        <TextInput
                            label='Телефон'
                            required
                            {...register('phone')}
                            error={errors.phone?.message}
                        />

                        <TextInput
                            label='Имя'
                            required
                            {...register('name')}
                            error={errors.name?.message}
                        />

                        <TextInput
                            label='Фамилия'
                            required
                            {...register('surname')}
                            error={errors.surname?.message}
                        />

                        <TextInput
                            label='Пароль'
                            type="password"
                            required
                            {...register('password', { required: 'Пароль обязателен' })}
                            error={errors.password?.message}
                        />

                        <Flex gap='sm'>
                            <Button disabled={!isValid} type="submit" flex={1} variant='filled'>
                                {isSubmitting ? <Loader size={16} /> : 'Зарегистрироваться'}
                            </Button>
                        </Flex>
                    </Flex>
                </form>
            </Flex>
        </Paper>
    );
};

export default SignUp;