import { Button } from "@ariakit/react";
import { cx } from "../class-names.ts";
import {
  Letterhead,
  LetterheadHeading,
  LetterheadParagraph,
} from "../Letterhead/index.tsx";
import { LetterheadHeader } from "../LetterheadForm/index.tsx";
import { useAppActions } from "../store/index.tsx";
import type { CurrentUser } from "../types.ts";
import { accountPicker } from "./style.css.ts";

export function UserMismatchView(props: {
  serverUser: CurrentUser;
  localUser: CurrentUser;
  reload: () => void;
}) {
  const { localUser, serverUser, reload } = props;
  const { clientLogout, serverLogout } = useAppActions();

  return (
    <Letterhead>
      <LetterheadHeader>
        <LetterheadHeading>User mismatch</LetterheadHeading>

        <LetterheadParagraph>
          You are logged into Indie Tabletop Club as <em>{serverUser.email}</em>
          , but locally stored data belong to <em>{localUser.email}</em>.
        </LetterheadParagraph>

        <LetterheadParagraph>
          Which account do you want to use?
        </LetterheadParagraph>
      </LetterheadHeader>

      <div {...cx(accountPicker.container)}>
        <Button
          {...cx(accountPicker.button)}
          type="button"
          onClick={async () => await clientLogout({ serverUser })}
        >
          <div {...cx(accountPicker.buttonLabel)}>{serverUser.email}</div>
          <div>Local data will be deleted.</div>
        </Button>

        <div {...cx(accountPicker.divider)} />

        <Button
          {...cx(accountPicker.button)}
          type="button"
          onClick={async () => {
            await serverLogout();
            reload();
          }}
        >
          <div {...cx(accountPicker.buttonLabel)}>{localUser.email}</div>
          <div>You will be asked to log in again.</div>
        </Button>
      </div>
    </Letterhead>
  );
}