import { useForm } from "react-hook-form";
import { type LoginData, useLoginMutation } from "../api/auth";
import { useQueryClient } from "@tanstack/react-query";

export type LoginFormProps = {
  onClose: () => void;
  onRegister: () => void;
};

export const LoginForm = ({ onClose, onRegister }: LoginFormProps) => {
  const queryClient = useQueryClient();
  const mutation = useLoginMutation();

  const form = useForm<LoginData>({
    defaultValues: {
      login: "",
      password: "",
    },
  });

  const onSubmit = form.handleSubmit((data) => {
    mutation.mutate(data, {
      onSuccess() {
        form.reset();
        onClose();
        queryClient.invalidateQueries({ queryKey: ["user"] });
      },
    });
  });

  return (
    <form className="flex flex-col gap-2 mt-5" onSubmit={onSubmit}>
      <input
        type="text"
        placeholder="login"
        className="w-full"
        {...form.register("login", {
          required: true,
        })}
      />
      <input
        type="password"
        placeholder="password"
        className="w-full"
        {...form.register("password", {
          required: true,
        })}
      />
      <button type="submit" className="w-full mt-2">
        Continue
      </button>
      <p>
        Don't have an account?{" "}
        <button type="button" onClick={() => onRegister()}>
          Register
        </button>
      </p>
    </form>
  );
};