import React, { createContext, useRef, useState } from 'react';
import ReactDom from 'react-dom';
import {BrowserRouter, Route, Switch as RouterSwitch} from 'react-router-dom';
import { Gallery, ContentAbout} from './page/mod';
import {BackLinkContext} from './state';

import './css/style.css';

const FooProfile = ()=><div>test profile</div>;
const App = () => {
    const [path,setPath] = useState("/");
    return (
    <BackLinkContext.Provider value={{path:path,setPath:setPath}}>
        <BrowserRouter>
                <RouterSwitch>
                    <Route path="/" exact render={()=><Gallery />}></Route>
                    <Route path="/search" render={()=><Gallery />}></Route>
                    <Route path="/doc" render={(prop)=><ContentAbout {...prop}/>}></Route>
                    <Route path="/profile" component={FooProfile}></Route>
                    <Route>
                        <div>404 Not Found</div>
                    </Route>
                </RouterSwitch>
        </BrowserRouter>
    </BackLinkContext.Provider>);
};

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