import React, { useState } from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './components/Login';
import Register from './components/Register';
import Dog from './components/Dog';
import Qr from './components/Qr';
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, logOut} from './services/PhpApi'
import { TUser } from './context/UserContext';
import PasswordReset from './components/PasswordReset';
import WantNewPw from './components/WantNewPw';
import 
{ 
  MantineProvider,
  AppShell, 
   
  Text, 
   
   
  Header,
  MediaQuery,
  Burger,
  Stack
} from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import { NotificationsProvider } from '@mantine/notifications';
import { notificationAlert, notificationError, notificationSuccess } from './services/Notifications';
import DogNavbar from './components/DogNavbar';
import PasswordChange from './components/PasswordChange';

const App: React.FC = () => 
{
  const {data, error, isLoading, mutate} = useSWR("/user", getUser);
  const [opened, setOpened] = useState(false);
  
  console.log('App getUser');
  console.log(data);
  

  async function userLogout()
  {
    await logOut();
    mutate();
    notificationSuccess('Abgemeldet!');
    console.log('userLogout');

    window.location.href = '/dog/';
  }


  if (error)
  { 
    notificationError(error.message);
    return (
      <>
        <div>failed to load</div>
      </>);
  }
  if (isLoading) return (<div>loading...</div>);
  
  let user: TUser | null;
  let hasUser: boolean;
  if(data.success)
  {
    user = data.data;
    hasUser = true;
  }
  else
  {
    user = null;
    hasUser = false;
  }
  
  return (
    <MantineProvider withNormalizeCSS withGlobalStyles>
      <NotificationsProvider position="top-center" >    
        <div className="App">
          <Stack>
            <div className='h-11'></div>       {/* dummy header */}
            <BrowserRouter basename='/dog/'>
              <AppShell
                padding={0}
                fixed
                navbarOffsetBreakpoint="sm"
                navbar={<DogNavbar qr_id={user ? user.qr_id : null} hidden={!opened} hasUser={user ? true : false} onLogout={userLogout}/>} 
              
                header={
                  <Header height={'44px'} p="md" className='w-16 bg-orange-500'>
                    <div className='flex justify-start'>
                      <MediaQuery largerThan="sm" styles={{ display: 'none' }}>
                        <Burger
                          opened={opened}
                          onClick={() => setOpened((o) => !o)}
                          size="sm"
                          
                          mr="xl"
                        />
                      </MediaQuery>
          
                      <Text></Text>
                    </div>
                  </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/>} />
                  <Route path="/pwreset/:pwtoken" element={<PasswordReset/>} />
                  <Route path="/wantnewpw" element={<WantNewPw/>} />
                  {user && <Route path="/upload" element={<FileUpload/>} />}
                  {user && <Route path="/chngpw" element={<PasswordChange/>} />}
                  {user && <Route path="/profil" element={<Profil/>} />}
              </Routes>
              </AppShell>
            </BrowserRouter>
            </Stack>
          </div>
      </NotificationsProvider>
    </MantineProvider>
  );
}

export default App;