export type Session = { id: number; name: string };
//If we leave this undefined, then value passed through provider is also undefined
export const AuthContext = createContext<() => Session>();

const RouteGuard: ParentComponent = (props) => {
  const navigate = useNavigate();
  const query = createQuery<Session>(() => ({
    queryKey: ["session"],
    queryFn: () => {
      return { id: 1, name: "Jimothy" };
    },
  }));

  createEffect(() => {
    if (!query.data && query.isFetched) {
      navigate("/auth/sign-in");
    }
  });

  return (
    <Suspense fallback={"loading..."}>
      <Show when={query.data} fallback={"no data"}>
        <AuthContext.Provider value={() => query.data!}>
          {props.children}
        </AuthContext.Provider>
      </Show>
    </Suspense>
  );
};

const queryClient = new QueryClient();
const App: Component = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <Router>
        <Route path="/auth" component={AuthLayout}>
          <Route path="sign-in" component={SignInUp} />
          <Route path="sign-up" component={SignInUp} />
          <Route path="verify" component={() => <>test3</>} />
        </Route>
        <Route path="/" component={RouteGuard}>
          {/* Protected Routes from here on */}

          <Route path="/home" component={Home} />
        </Route>
      </Router>
    </QueryClientProvider>
  );
};

export type Session = { id: number; name: string };
//If we leave this undefined, then value passed through provider is also undefined
export const AuthContext = createContext<() => Session>();

const RouteGuard: ParentComponent = (props) => {
  const navigate = useNavigate();
  const query = createQuery<Session>(() => ({
    queryKey: ["session"],
    queryFn: () => {
      return { id: 1, name: "Jimothy" };
    },
  }));

  createEffect(() => {
    if (!query.data && query.isFetched) {
      navigate("/auth/sign-in");
    }
  });

  return (
    <Suspense fallback={"loading..."}>
      <Show when={query.data} fallback={"no data"}>
        <AuthContext.Provider value={() => query.data!}>
          {props.children}
        </AuthContext.Provider>
      </Show>
    </Suspense>
  );
};

const queryClient = new QueryClient();
const App: Component = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <Router>
        <Route path="/auth" component={AuthLayout}>
          <Route path="sign-in" component={SignInUp} />
          <Route path="sign-up" component={SignInUp} />
          <Route path="verify" component={() => <>test3</>} />
        </Route>
        <Route path="/" component={RouteGuard}>
          {/* Protected Routes from here on */}

          <Route path="/home" component={Home} />
        </Route>
      </Router>
    </QueryClientProvider>
  );
};

const Home: Component = (props) => {
  //Need null ! here because initial state isn't defined. ts isn't smart enough to know it can't get here
  //Can fail on hot module reload since only this comp is reloaded on save
  const user = useContext(AuthContext)!;
  return <div>Hello {user().name}</div>;
};

export default Home;

const Home: Component = (props) => {
  //Need null ! here because initial state isn't defined. ts isn't smart enough to know it can't get here
  //Can fail on hot module reload since only this comp is reloaded on save
  const user = useContext(AuthContext)!;
  return <div>Hello {user().name}</div>;
};

export default Home;