import React from 'react';
import {useContext} 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 {UserCtx, UserCtxT} from './context/UserContext';
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';


const App: React.FC = () => 
{
  const {user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;

  return (
    <div className="App">
          <div className="col middle">
            <BrowserRouter basename='/dog'>
              {user && <Header />}
              <Routes>
                  {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/>} />
                  <Route path="/upload" element={<FileUpload/>} />
              </Routes>
              <Footer/>
            </BrowserRouter>
          </div>
        
    </div>
  );
}

export default App;