import { Button } from "@ariakit/react";
import { Link } from "wouter";
import { useAppConfig } from "../AppConfig/AppConfig.tsx";
import { interactiveText } from "../common.css.ts";
import {
  Letterhead,
  LetterheadHeading,
  LetterheadParagraph,
} from "../Letterhead/index.tsx";
import { useAppActions } from "../store/index.tsx";
import type { CurrentUser } from "../types.ts";

export function AlreadyLoggedInView(props: {
  currentUser: CurrentUser;
  reload: () => void;
}) {
  const { currentUser, reload } = props;
  const { hrefs } = useAppConfig();
  const { logout } = useAppActions();

  return (
    <Letterhead>
      <LetterheadHeading>Logged in</LetterheadHeading>
      <LetterheadParagraph>
        You are already logged into Indie Tabletop Club as{" "}
        <em>{currentUser.email}</em>.
      </LetterheadParagraph>

      <LetterheadParagraph>
        <Link className={interactiveText} href={hrefs.dashboard()}>
          Continue
        </Link>
        {` as the current user, or `}
        <Button
          className={interactiveText}
          onClick={async () => {
            await logout();
            reload();
          }}
        >
          log out
        </Button>
        .
      </LetterheadParagraph>
    </Letterhead>
  );
}