import { useForm, SubmitHandler } from 'react-hook-form';
import UserService from '../../services/UserService';
import { IUser } from '../../interfaces/user';
import { Button, Field, Input, Spinner, Text } from '@fluentui/react-components';

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 (
        <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 align='center' size={500} weight='bold'>
                Регистрация
            </Text>

            <form onSubmit={handleSubmit(onSubmit)}>
                <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '1rem'
                }}>
                    <Field label={'Email'} validationState={errors.email?.message ? 'error' : 'none'}>
                        <Input
                            required
                            {...register('email', { required: 'Email обязателен' })}
                        />
                    </Field>

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

                    <Field label={'Телефон'} validationState={errors.phone?.message ? 'error' : 'none'}>
                        <Input
                            required
                            {...register('phone', { required: 'Телефон обязателен' })}
                        />
                    </Field>

                    <Field label={'Имя'} validationState={errors.name?.message ? 'error' : 'none'}>
                        <Input
                            required
                            {...register('name', { required: 'Имя обязательно' })}
                        />
                    </Field>

                    <Field label={'Фамилия'} validationState={errors.surname?.message ? 'error' : 'none'}>
                        <Input
                            required
                            {...register('surname', { required: 'Фамилия обязательна' })}
                        />
                    </Field>

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

                    <Button disabled={!isValid} type="submit" appearance='primary'>
                        {isSubmitting ? <Spinner /> : 'Зарегистрироваться'}
                    </Button>
                </div>
            </form>
        </div>
    );
};

export default SignUp;