signup.tsx

"use client";

import { useForm } from "react-hook-form";
import { valibotResolver } from "@hookform/resolvers/valibot";
import { object, string, toTrimmed, Output, email, minLength } from "valibot";
import Image from "next/image";
import Link from "next/link";
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import emailSvg from "../assets/email.svg";
import lockSvg from "../assets/lock.svg";
import userSvg from "../assets/user.svg";

const schema = object({
    first_name: string([
        toTrimmed(),
        minLength(2, "must be at least 2 characters"),
    ]),
    last_name: string([
        toTrimmed(),
        minLength(2, "must be at least 2 characters"),
    ]),
    email: string([toTrimmed(), email("must be a valid email")]),
    password: string([toTrimmed()]),
    passwordConfirm: string([toTrimmed()]),
});

type FormValues = Output<typeof schema>;

const SignUpForm = () => {
    const form = useForm<FormValues>({
        defaultValues: {
            first_name: "",
            last_name: "",
            email: "",
            password: "",
            passwordConfirm: "",
        },
        resolver: valibotResolver(schema),
    });
    const [register] = useRegisterMutation();

    const {
        handleSubmit,
        formState: { isSubmitting, errors },
    } = form;
    async function onSubmit(values: FormValues) {
        // eslint-disable-next-line no-console
        console.log(values);
        form. Reset();
    }
    return (
        <Form {...form}>
            <form
                onSubmit={handleSubmit(onSubmit)}
                className="lg:px-9 px-4 py-4 lg:py-14 rounded-xl self-start w-[480px] font-sans lg:shadow-[0_12px_50px_0px_rgba(0,0,0,0.10)]"
            >
                <h2 className="text-alpha/95 text-xl font-bold text-center mb-11">
                    Signup into your account
                </h2>
                <FormField
                    control={form.control}
                    name="first_name"
                    render={({ field }) => (
                        <FormItem className="space-y-2 mb-4">
                            <FormLabel className="text-cardTitle text-base">
                                First Name
                            </FormLabel>
                            <FormControl>
                                <div className="relative flex">
                                    <Input
                                        placeholder="John"
                                        className="bg-activePage rounded-lg text-cardTitle placeholder:text-cardTitle h-12"
                                        {...field}
                                    />
                                    <div
                                        className={cn(
                                            "bg-primary absolute flex justify-center items-center rounded-lg h-12 w-12 right-0",
                                            cn(
                                                errors.first_name &&
                                                    "bg-Primary2"
                                            )
                                        )}
                                    >
                                        <Image src={userSvg} alt="username" />
                                    </div>
                                </div>
                            </FormControl>
                            <FormMessage className="text-right" />
                        </FormItem>
                    )}
                />
                <FormField
                    control={form.control}
                    name="last_name"
                    render={({ field }) => (
                        <FormItem className="space-y-2 mb-4">
                            <FormLabel className="text-cardTitle text-base">
                                Last Name
                            </FormLabel>
                            <FormControl>
                                <div className="relative flex">
                                    <Input
                                        placeholder="Doe"
                                        className="bg-activePage rounded-lg text-cardTitle placeholder:text-cardTitle h-12"
                                        {...field}
                                    />
                                    <div
                                        className={cn(
                                            "bg-primary absolute flex justify-center items-center rounded-lg h-12 w-12 right-0",
                                            cn(
                                                errors.last_name &&
                                                    "bg-Primary2"
                                            )
                                        )}
                                    >
                                        <Image src={userSvg} alt="username" />
                                    </div>
                                </div>
                            </FormControl>
                            <FormMessage className="text-right" />
                        </FormItem>
                    )}
                />
                <FormField
                    control={form.control}
                    name="email"
                    render={({ field }) => (
                        <FormItem className="space-y-2 mb-4">
                            <FormLabel className="text-cardTitle text-base">
                                Email Address
                            </FormLabel>
                            <FormControl>
                                <div className="relative flex">
                                    <Input
                                        type="email"
                                        placeholder="[email protected]"
                                        className="bg-activePage rounded-lg text-cardTitle placeholder:text-cardTitle h-12"
                                        {...field}
                                    />
                                    <div className="bg-primary absolute flex justify-center items-center rounded-lg h-12 w-12 right-0">
                                        <Image src={emailSvg} alt="email" />
                                    </div>
                                </div>
                            </FormControl>
                            <FormMessage className="text-right" />
                        </FormItem>
                    )}
                />
                <FormField
                    control={form.control}
                    name="password"
                    render={({ field }) => (
                        <FormItem className="space-y-2 mb-4">
                            <FormLabel className="text-cardTitle text-base">
                                Password
                            </FormLabel>
                            <FormControl>
                                <div className="relative flex">
                                    <Input
                                        type="password"
                                        placeholder="Enter you password"
                                        className="bg-activePage rounded-lg text-cardTitle placeholder:text-cardTitle h-12"
                                        {...field}
                                    />
                                    <div className="bg-primary absolute flex justify-center items-center rounded-lg h-12 w-12 right-0">
                                        <Image src={lockSvg} alt="password" />
                                    </div>
                                </div>
                            </FormControl>
                            <FormMessage className="text-right" />
                        </FormItem>
                    )}
                />
                <FormField
                    control={form.control}
                    name="passwordConfirm"
                    render={({ field }) => (
                        <FormItem className="space-y-2 mb-2">
                            <FormLabel className="text-cardTitle text-base">
                                Confirm Password
                            </FormLabel>
                            <FormControl>
                                <div className="relative flex">
                                    <Input
                                        type="password"
                                        placeholder="Enter you password"
                                        className="bg-activePage rounded-lg text-cardTitle placeholder:text-cardTitle h-12"
                                        {...field}
                                    />
                                    <div className="bg-primary absolute flex justify-center items-center rounded-lg h-12 w-12 right-0">
                                        <Image
                                            src={lockSvg}
                                            alt="confirm password"
                                        />
                                    </div>
                                </div>
                            </FormControl>
                            <FormMessage className="text-right" />
                        </FormItem>
                    )}
                />
                <Link
                    className="text-xs underline text-alpha/95 text-right block mb-8"
                    href="/signin"
                >
                    Already have an account?
                </Link>
                <button
                    disabled={isSubmitting}
                    className="text-white bg-Primary2 rounded-lg w-full capitalize h-12 shadow-shadow-md mb-10"
                    type="submit"
                >
                    Sign Up
                </button>
                <div className="flex gap-5 items-center mb-8">
                    <div className="h-px bg-regularfont flex-1" />
                    <p className="text-regularfont text-xs">OR</p>
                    <div className="h-px bg-regularfont flex-1" />
                </div>
                <Link
                    className="text-primary mb-5 font-semibold border border-primary block text-center py-3 bg-white rounded-lg w-full capitalize h-12 shadow-shadow-md"
                    href="/signin"
                >
                    login
                </Link>
                <p className="text-2xl font-bold text-[#979797] text-center mb-5">
                    OR
                </p>
                <button className="rounded-lg shadow-shadow-md" type="button">
                    <Image
                        width={409}
                        height={54}
                        src="/images/googlebutton.svg"
                        alt="google button image"
                    />
                </button>
            </form>
        </Form>
    );
};

export default SignUpForm;