import { Accessor, JSXElement, createContext, createSignal } from "solid-js";

import { LoginModal } from "./LoginModal";
import { Navbar } from "./Navbar";
import { Primary } from "./Primary";

// Representing the state of varoious modals.
// So far we only have one modal, but we can add more later
// by adding more fields to this interface, or maybe an enum
interface ModalContextType {
  loginModalOpen: Accessor<boolean>;
  setLoginModalOpen: (value: boolean) => void;
}

interface LoginContextType {
  token: Accessor<string>;
  setToken: (value: string) => void;
  username: Accessor<string>;
  setUsername: (value: string) => void;
}

// It is unclear to me if this is the idiomatic way to do this in Solid
export const ModalContext = createContext<ModalContextType>();
export const LoginContext = createContext<LoginContextType>();

function Root(): JSXElement {
  // All of these are passed into context providers
  const [loginModalOpen, setLoginModalOpen] = createSignal(false);
  const [token, setToken] = createSignal("");
  const [username, setUsername] = createSignal("");

  // This may not be the best place to do this.
  localStorage.getItem("token") && setToken(localStorage.getItem("token")!);
  localStorage.getItem("username") &&
    setUsername(localStorage.getItem("username")!);

  return (
    <>
      <ModalContext.Provider value={{ loginModalOpen, setLoginModalOpen }}>
        <LoginContext.Provider
          value={{ token, setToken, username, setUsername }}
        >
          <div class="flex flex-col items-center">
            <Navbar />
            <LoginModal />
            <div class="flex w-full flex-col items-center space-y-2 px-2 md:max-w-3xl">
              <Primary />
            </div>
          </div>
        </LoginContext.Provider>
      </ModalContext.Provider>
    </>
  );
}

export default Root;