'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
import AppLink from './AppLink';
import Button from './Button';
import Input from './Input';

export default function UserAuthForm() {
  return (
    <>
      <AuthForm />
    </>
  );
}

type FormData = {
  email?: string;
  username: string;
  password: string;
};

function AuthForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError
  } = useForm<FormData>({
    defaultValues: {
      email: '',
      username: '',
      password: ''
    }
  });

  const router = useRouter();
  const pathname = usePathname()!;
  const isSignIn = pathname.includes('sign-in');

  async function onSubmit(data: FormData) {
    const res = await fetch(`http://170.75.166.204/${isSignIn ? 'login' : 'register'}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        ...data
      })
    });

    if (res.status === 200) {
      router.push('/dashboard');
    }
  }

  return (
    <form
      className="bg-dark flex flex-col space-y-4 rounded-md p-6"
      onSubmit={handleSubmit(onSubmit)}
    >
      {!isSignIn && (
        <Input
          label="Adresse e-mail"
          type="email"
          placeholder="Ex: peer-at@exemple.be"
          required
          error={
            errors.email?.message
            //   &&
            //   (isSignIn ? (
            //     <>
            //       {translations.noAccountAssociated}{' '}
            //       <AppLink className="underline" href="/sign-up">
            //         {translations.signUpQuestion}
            //       </AppLink>
            //     </>
            //   ) : (
            //     errors.email.message
            //   ))
          }
          {...register('email')}
        />
      )}
      <Input
        label="Nom d'utilisateur"
        type="text"
        placeholder='Ex: "PeerAt"'
        required
        {...register('username', { required: true })}
      />
      <Input
        label="Mot de passe"
        type="password"
        placeholder='Ex: "MotDePasse123"'
        required
        {...register('password', { required: true })}
      />
      <Button type="submit" kind="brand">
        Se connecter
      </Button>
      {/* {!isSignIn && (
        <p className="items-center text-sm text-gray-400">
          En cliquant sur continuer, vous acceptez les{' '}
          <AppLink className="text-white underline" href="/privacy-policy" target="_blank">
            Politique de confidentialité
          </AppLink>
          .
        </p>
      )} */}
      <p className="flex flex-col items-center text-sm text-gray-400">
        {isSignIn ? "Vous n'avez pas de compte?" : 'Vous possédez un compte?'}{' '}
        <AppLink className="text-white underline" href={isSignIn ? '/sign-up' : '/sign-in'}>
          {isSignIn ? "S'inscrire maintenant" : 'Se connecter'}
        </AppLink>
      </p>
    </form>
  );
}