import { zodResolver } from '@hookform/resolvers/zod';
import { ArrowRight } from '@phosphor-icons/react';
import React from 'react';
import { type SubmitHandler, useForm } from 'react-hook-form';
import { Button } from '~/components/ui/Button';
import { ErrorMessage } from '~/components/ui/ErrorMessage';
import { Input } from '~/components/ui/Input';
import { Label } from '~/components/ui/Label';
import { RadioGroup, RadioGroupItem } from '~/components/ui/RadioGroup';
import { RegisterStepOneDto } from '~/config/form/auth/register-dto';
import { type RegisterFormStepProps } from '~/types/register-form';

export const RegisterFormStepOne = ({ data, onGoToNextStep }: RegisterFormStepProps) => {
    const {
        register,
        handleSubmit,
        formState: { errors },
        setError,
        setValue,
    } = useForm<RegisterStepOneDto>({
        defaultValues: {
            ...data,
        },
        resolver: zodResolver(RegisterStepOneDto),
    });

    const onSubmit: SubmitHandler<RegisterStepOneDto> = data => {
        if (data.password !== data.passwordConfirmation) {
            setError('passwordConfirmation', {
                message: 'Wachtwoorden komen niet overeen',
                type: 'manual',
            });

            return;
        }

        onGoToNextStep(data);
    };

    return (
        <form
            onSubmit={handleSubmit(onSubmit)}
            className="flex flex-col gap-y-3"
        >
            <Label htmlFor="email">
                E-mailadres
            </Label>
            <Input
                id="email"
                type="email"
                autoCapitalize="none"
                autoComplete="email"
                autoCorrect="off"
                error={errors.email}
                defaultValue={data.email}
                {...register('email')}
            />
            {errors.email?.message && <ErrorMessage message={errors.email.message} />}
            <Label htmlFor="firstName">
                Voornaam
            </Label>
            <Input
                id="firstName"
                type="text"
                autoComplete="given-name"
                autoCorrect="off"
                error={errors.firstName}
                defaultValue={data.firstName}
                {...register('firstName')}
            />
            {errors.firstName?.message && <ErrorMessage message={errors.firstName.message} />}
            <Label htmlFor="gender">
                Geslacht
            </Label>
            <RadioGroup
                onValueChange={genderValue => {
                    setValue('gender', genderValue as ('female' | 'male'));
                }}
                defaultValue={data.gender}
            >
                <div className="flex items-center space-x-2">
                    <RadioGroupItem
                        value="male"
                        id="male"
                    />
                    <Label htmlFor="male">Man</Label>
                </div>
                <div className="flex items-center space-x-2">
                    <RadioGroupItem
                        value="female"
                        id="female"
                    />
                    <Label htmlFor="female">Vrouw</Label>
                </div>
            </RadioGroup>
            {errors.gender?.message && <ErrorMessage message={errors.gender.message} />}
            <Label htmlFor="lastName">
                Achternaam
            </Label>
            <Input
                id="lastName"
                type="text"
                autoComplete="family-name"
                autoCorrect="off"
                error={errors.lastName}
                defaultValue={data.lastName}
                {...register('lastName')}
            />
            {errors.lastName?.message && <ErrorMessage message={errors.lastName.message} />}
            <Label htmlFor="password">
                Wachtwoord
            </Label>
            <Input
                id="password"
                type="password"
                autoCapitalize="none"
                autoComplete="password"
                autoCorrect="off"
                error={errors.password}
                defaultValue={data.password}
                {...register('password')}
            />
            {errors.password?.message && <ErrorMessage message={errors.password.message} />}
            <Label htmlFor="passwordConfirmation">
                Wachtwoord bevestiging
            </Label>
            <Input
                id="passwordConfirmation"
                type="password"
                autoCapitalize="none"
                autoComplete="password"
                autoCorrect="off"
                error={errors.passwordConfirmation}
                defaultValue={data.passwordConfirmation}
                {...register('passwordConfirmation')}
            />
            {errors.passwordConfirmation?.message && <ErrorMessage message={errors.passwordConfirmation.message} />}
            <Button variant="outline">
                Volgende stap <ArrowRight
                    size={16}
                    className="ml-2"
                />
            </Button>
        </form>
    );
};