import React, { createContext, useEffect, useRef, useState } from 'react';
import ReactDom from 'react-dom';
import {BrowserRouter, Redirect, Route, Switch as RouterSwitch} from 'react-router-dom';
import { Gallery, ContentAbout, LoginPage, NotFoundPage, ProfilePage,DifferencePage} from './page/mod';
import {getInitialValue, UserContext} from './state';

import './css/style.css';

const App = () => {
    const [user,setUser] = useState("");
    const [userPermission,setUserPermission] = useState<string[]>([]);
    (async ()=>{
        const {username,permission} = await getInitialValue();
        if(username !== user){
            setUser(username);
            setUserPermission(permission);
        }
    })();
    //useEffect(()=>{});
    return (
    <UserContext.Provider value={{
        username:user,
        setUsername:setUser,
        permission:userPermission,
        setPermission:setUserPermission}}>
        <BrowserRouter>
                <RouterSwitch>
                    <Route path="/" exact render={()=><Redirect to='/search?'/>}></Route>
                    <Route path="/search" render={()=><Gallery />}></Route>
                    <Route path="/doc" render={(prop)=><ContentAbout {...prop}/>}></Route>
                    <Route path="/login" render={()=><LoginPage></LoginPage>}/>
                    <Route path="/profile" component={ProfilePage}></Route>
                    <Route path="/difference" component={DifferencePage}></Route>
                    <Route>
                        <NotFoundPage/>
                    </Route>
                </RouterSwitch>
        </BrowserRouter>
    </UserContext.Provider>);
};

ReactDom.render(
    <App/>,
    document.getElementById("root")
)