import React from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './components/Login';
import Register from './components/Register';
import Home from './components/Home';
import Dog from './components/Dog';
import Qr from './components/Qr';
import Header from './components/Header';
import Footer from './components/Footer';
import Impressum from './components/Impressum';
import "bootstrap/dist/css/bootstrap.min.css";
import FileUpload from './components/FileUpload';
import Profil from './components/Profil';
import useSWR from 'swr';
import {getUser} from './services/PhpApi'
import toast, { Toaster } from 'react-hot-toast';
import { TUser } from './context/UserContext';

const App: React.FC = () => 
{
  const {data, error, isLoading} = useSWR("/user", getUser);

  console.log('App getUser');
  console.log(data);
  
  if (error)
  { 
    toast.error(error.message);
    return (
      <>
        <Toaster toastOptions={{ position: "top-center" }} />
        <div>failed to load</div>
      </>);
  }
  if (isLoading) return (<div>loading...</div>);
  
  let user: TUser | null;
  if(data.success)
  {
    user = data.data;
  }
  else
  {
    user = null;
  }
  
  return (
    <div className="App">
          <div className="col middle">
            <BrowserRouter basename='/dog/'>
              {user && <Header />}
              <Routes>
                  {user && <Route index path="/" element={<Profil/>} />}
                  {/* {user && <Route index path="/" element={<Home/>} />} */}
                  {!user && <Route index path="/" element={<Login/>} />}
                  {user && <Route path="/qr" element={<Qr/>} />}
                  {user && <Route path="/d" element={<Dog/>} />}
                  <Route path="/:qr_id" element={<Dog/>} />
                  <Route path="/login" element={<Login/>} />
                  <Route path="/reg" element={<Register/>} />
                  <Route path="/impressum" element={<Impressum/>} />
                  {user && <Route path="/upload" element={<FileUpload/>} />}
                  {user && <Route path="/profil" element={<Profil/>} />}
              </Routes>
              <Footer/>
            </BrowserRouter>
          </div>
        
    </div>
  );
}

export default App;
