import Test from "./test";
import Cookies from "./cookies/Cookies";
import spinner from "./assets/icons/spinner.svg";
import "./App.css";
import "./thai.css";
import Loader from "./timeline/Entry";
import Modal from "./modals/Modal";
import { useGlobalState } from "./logic/state";
import { useEffect, useState } from "react";
import { useHistory, Router, Route } from "./logic/router";
import { useQueryClient } from "@tanstack/react-query";
import { twatterCookieQ } from "./logic/queries";

function App() {
  const [loading, setLoading] = useState(true);
  const { init, modal } = useGlobalState();
  const qc = useQueryClient();
  async function pref() {
    await qc.prefetchQuery(twatterCookieQ);
  }
  useEffect(() => {
    init().then(_ => {
      setLoading(false);
    });
    pref();
  }, []);
  // const { init } = useGlobalState();
  if (loading) return <img className="spinner gc" src={spinner} />
  return (
    <>
      <Router basePath="/">
        <Route path="/" component={Nav} />
        <Route path="/cookies" component={Cookies} />
        <Route path="/main" component={Loader} />
      </Router>
      {modal && <Modal>{modal}</Modal>}
    </>
  );
}
function Nav() {
  const { navigate } = useHistory();
  return (
    <>
      <h1>TwitTok</h1>
      <a onClick={() => navigate("/cookies")} className="button">
        Set Cookies
      </a>
      <a onClick={() => navigate("/main")} className="button">
        Go Browse
      </a>
    <Test />
    </>
  );
}

export default App;