import React from "react";
import {
  ModalStateProvider,
  routes,
  useRegisterScreens,
  type ConnectCallbackProps,
  type ScreenDef,
} from "@multiplatform.one/connectkit";
import { useContext as useReactContext } from "react";
import SignInWithGpg from "./SignInWithGpg";
import { GpgContext } from "./GpgContext";
import { GpgIcon } from "./GpgIcon";

// The GPG screen contributed to connectkit's signer-agnostic modal. GPG has no
// connect step, so it's available in both connected and disconnected states.
// With a wallet bridge it is also a row in the wallet list, next to MetaMask and
// Phantom, and while disconnected its back chevron returns to that list. A
// gpg-only host has no list (no `connected` in its state), so no back there.
export const gpgScreen: ScreenDef = {
  id: routes.SIGNINWITHGPG,
  component: SignInWithGpg,
  heading: "Sign in with GPG",
  availableWhen: () => true,
  showBack: (state) => state.connected === false,
  onBack: (api) => api.setRoute(routes.CONNECTORS),
  showInfo: false,
  listEntry: {
    name: "GPG",
    icon: <GpgIcon />,
    visibleWhen: (state) => !!state.signInWithGpg,
  },
};

/**
 * Mount inside ConnectKitProvider (under ScreenRegistryProvider) to publish the GPG
 * screen to the modal. Renders nothing. web3 mounts this alongside its wallet
 * screens; a gpg-only app uses {@link GpgBridge}.
 */
export const GpgScreenRegistrar: React.FC = () => {
  useRegisterScreens([gpgScreen]);
  return null;
};

/**
 * The signer bridge for a GPG-only app (no wagmi/web3). Pass to ConnectKitProvider's
 * `bridge` prop: it registers the GPG screen and injects a ModalState advertising
 * GPG sign-in is available. Open the screen via the SignInWithGpgButton (which calls
 * `openScreen('signInWithGpg')`).
 */
export const GpgBridge: React.FC<{ children?: React.ReactNode } & ConnectCallbackProps> = ({
  children,
}) => {
  const signInWithGpg = useReactContext(GpgContext)?.enabled ?? true;
  return (
    <>
      <GpgScreenRegistrar />
      <ModalStateProvider value={{ signInWithGpg }}>{children}</ModalStateProvider>
    </>
  );
};