import { zodResolver } from "@hookform/resolvers/zod";
import { Link } from 'react-router-dom';

import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";

import { Input } from "@/components/ui/input";

import { Button } from "@/components/ui/button";
import { useForm } from "react-hook-form";
import { SignupValidation } from "@/lib/validation";
import { z } from "zod";
import { Loader } from "lucide-react";
import { createUserAccount } from "@/lib/appwrite/api";
 



const SignupForm = () => {

    const isLoading = false;
       // 1. Define your form.
  const form = useForm<z.infer<typeof SignupValidation>>({
    resolver: zodResolver(SignupValidation),
    defaultValues: {
      name: '',
      username: '',
      email: '',
      password: '',
    },
  })
 
  // 2. Define a submit handler.
  async function onSubmit(values: z.infer<typeof SignupValidation>) {
   const newUser = await createUserAccount(values);

   console.log(newUser);
   
  }

    return (
        <Form {...form}>
            <div className="sm:w-420 flex-center flex-col">
                <img src="/assets/images/logo.svg" alt="logo" />

            <h2 className="h3-bold md:h2-bold pt-5 sm:pt-12">Créer un nouveau compte</h2>
            <p className="text-light-3 small-medium md:base-regular mt-2">Pour utiliser Snapgram, merci d'entrez vos informations</p>

      <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-5 w-full mt-4">
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Nom</FormLabel>
              <FormControl>
                <Input type="text" className="shad-input " {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
          <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Prénom</FormLabel>
              <FormControl>
                <Input type="text" className="shad-input " {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
                  <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="text" className="shad-input " {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
                  <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Mot de Passe</FormLabel>
              <FormControl>
                <Input type="text" className="shad-input " {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" className="shad-button_primary">

            {isLoading ? (
                <div className="flex-cente gap-2">
                    <Loader />
                    Chargement...
                </div>
            ): "S'inscrire"}

        </Button>

        <p className="text-small-regular text-light-2 text-center mt-2">Vous avez déjà un compte?
                <Link to="/sign-in" className="text-primary-500 text-small-semibold ml-1">Vous connecter</Link>
        </p>
      </form>
      </div>

    </Form>
    
        )
}

export default SignupForm