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

export const RegisterFormStepTwo = ({ data, onGoToNextStep, onGoToPreviousStep, isLoading }: RegisterFormStepProps) => {
    const {
        register,
        handleSubmit,
        formState: { errors },
        setValue,
    } = useForm<RegisterStepTwoDto>({
        resolver: zodResolver(RegisterStepTwoDto),
    });

    const onSubmit: SubmitHandler<RegisterStepTwoDto> = data => {
        onGoToNextStep(data);
    };

    return (
        <Form
            onSubmit={handleSubmit(onSubmit)}
            className="flex flex-col gap-y-3"
            isLoading={isLoading}
        >
            <Label htmlFor="companyName">
                Bedrijfsnaam
            </Label>
            <Input
                id="companyName"
                type="text"
                autoCapitalize="none"
                autoComplete="organization"
                error={errors.companyName}
                defaultValue={data.companyName}
                {...register('companyName')}
            />
            {errors.companyName?.message && <ErrorMessage message={errors.companyName.message} />}
            <Label htmlFor="companyAddress">
                Adres en huisnummer
            </Label>
            <Input
                id="companyAddress"
                type="text"
                autoCapitalize="none"
                autoComplete="address-line1"
                error={errors.companyAddress}
                defaultValue={data.companyAddress}
                {...register('companyAddress')}
            />
            {errors.companyAddress?.message && <ErrorMessage message={errors.companyAddress.message} />}
            <Label htmlFor="companyCity">
                Stad
            </Label>
            <Input
                id="companyCity"
                type="text"
                autoCapitalize="none"
                autoComplete="address-level2"
                error={errors.companyCity}
                defaultValue={data.companyCity}
                {...register('companyCity')}
            />
            {errors.companyCity?.message && <ErrorMessage message={errors.companyCity.message} />}
            <Label htmlFor="companyPostalCode">
                Postcode
            </Label>
            <Input
                id="companyPostalCode"
                type="text"
                autoCapitalize="true"
                autoComplete="postal-code"
                error={errors.companyPostalCode}
                defaultValue={data.companyPostalCode}
                {...register('companyPostalCode')}
            />
            {errors.companyPostalCode?.message && <ErrorMessage message={errors.companyPostalCode.message} />}
            <Label htmlFor="companyPhone">
                Telefoonnummer
            </Label>
            <Input
                id="companyPhone"
                type="tel"
                autoCapitalize="true"
                autoComplete="postal-code"
                error={errors.companyPhone}
                defaultValue={data.companyPhone}
                {...register('companyPhone')}
            />
            {errors.companyPhone?.message && <ErrorMessage message={errors.companyPhone.message} />}
            <Label htmlFor="companyEmail">
                E-mailadres
            </Label>
            <Input
                id="companyEmail"
                type="tel"
                autoCapitalize="true"
                autoComplete="email"
                error={errors.companyEmail}
                defaultValue={data.companyEmail}
                {...register('companyEmail')}
            />
            <Button
                variant="link"
                className="self-start"
                type="button"
                onClick={() => setValue('companyEmail', data.email)}
            >
                Invullen uit vorige stap
            </Button>
            {errors.companyEmail?.message && <ErrorMessage message={errors.companyEmail.message} />}
            <div className="flex items-center gap-1">
                <Button
                    variant="outline"
                    type="button"
                    className="flex-1"
                    onClick={onGoToPreviousStep}
                >
                    <ArrowRight
                        size={16}
                        className="mr-2 rotate-180"
                    /> Vorige stap
                </Button>
                <Button className="flex-1">
                    Registratie afronden
                </Button>
            </div>
        </Form>
    );
};