import "./App.css";
import "./theme/variables.css";
import "@ionic/react/css/core.css";
import "@ionic/react/css/display.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/padding.css";
import "@ionic/react/css/palettes/dark.system.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/typography.css";

import { IonApp, setupIonicReact } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { useAtom } from "jotai";
import { useEffect, useState } from "react";

import { currentTrackAtom } from "./atoms";
import { mocks } from "./mocks";
import Tab from "./pages/Tab3";
import LocationAccessChecker from "./hooks/GeoAccess";

/* Core CSS required for Ionic components to work properly */
/* Basic CSS for apps built with Ionic */
/* Optional CSS utils that can be commented out */
/* Dark mode */
/* Theme variables */
/* Custom CSS */
setupIonicReact();

const App: React.FC = () => {
  const [current, setCurrent] = useAtom(currentTrackAtom);
  const [accessGranted, setAccessGranted] = useState<boolean | null>(null);

  useEffect(() => {
    setCurrent(mocks.nowPlaying);
  }, []);

  // if (accessGranted === false) {
  //   console.log("access denied.");
  //   return null;
  // }

  return (
    <IonApp>
      <LocationAccessChecker onAccessChecked={setAccessGranted} />
      <IonReactRouter>
        <Tab />
      </IonReactRouter>
    </IonApp>
  );
};

export default App;