import { Navigate, useNavigate } from "react-router";

import { useApiState } from "@/api/useApiState";
import { PageTitle } from "@/components/page_title/PageTitle";
import { t } from "@/i18n/translate";
import { LoginResponse } from "@/types/generated/openapi";

import { AccountSetupForm } from "./AccountSetupForm";

export function AccountSetupPage() {
  const navigate = useNavigate();
  const { user, setUser } = useApiState();

  function handleSaved(user: LoginResponse) {
    setUser(user);
    void navigate("/elections#new-account");
  }

  if (!user) {
    return <Navigate to="/account/login" state={{ unauthorized: true }} />;
  }

  return (
    <>
      <PageTitle title={`${t("account.account_setup")} - Abacus`} />
      <header>
        <section>
          <h1>{t("account.account_setup")}</h1>
        </section>
      </header>
      <main>
        <article>
          <AccountSetupForm user={user} onSaved={handleSaved} />
        </article>
      </main>
    </>
  );
}
