"use client";

import "./App.scss";
import Sign_in from "./sign_in";
import Sign_up from "./sign_up";
import Dashboard from "./dash";
import { useState, useEffect } from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  useNavigate,
} from "react-router-dom";
import { Button } from "./components/ui/button";
import { useAlert } from "./alert";
import SplashScreen from "./splashscreen";
import { getShowSplash, setShowSplash } from "./global";

function App() {
  const { triggerAlert, AlertComponent } = useAlert();
  const [showSplash, setShowSplashState] = useState(getShowSplash());

  useEffect(() => {
    if (showSplash) {
      const splashTimeout = setTimeout(() => {
        setShowSplashState(false);
        setShowSplash(false);
      }, 5000);

      return () => clearTimeout(splashTimeout);
    }
  }, [showSplash]);

  if (showSplash) {
    return <SplashScreen />;
  }

  return (
    <Router>
      <main className="container bg-gray-100 font-fira-code flex h-screen">
        {AlertComponent}
        <Routes>
          <Route path="/" element={<Home triggerAlert={triggerAlert} />} />
          <Route path="/sign_in" element={<Sign_in />} />
          <Route path="/sign_up" element={<Sign_up />} />
          <Route path="/dash" element={<Dashboard />} />
        </Routes>
      </main>
    </Router>
  );
}

function Home({
  triggerAlert,
}: {
  triggerAlert: (
    title: string,
    description: string,
    type?: "default" | "error",
  ) => void;
}) {
  const nav = useNavigate();
  return (
    <>
      <h1>Welcome to Tauri + React</h1>
      <Button onClick={() => triggerAlert("event", "meow", "default")}>
        Show Event Alert
      </Button>

      <Button onClick={() => triggerAlert("error", "meow", "error")}>
        Show Error Alert
      </Button>
      <Button onClick={() => nav("/sign_in")} className="btn">
        Go to Login
      </Button>
    </>
  );
}

export default App;