import React, { useEffect, useState } from 'react'
import { Router, Route, Redirect, withRouter, Switch } from 'react-router-dom';
import { Provider, useSelector } from 'react-redux';
import { store } from './components/redux/index';
import createHistory from "history/createBrowserHistory";

import './App.css';
// import logo from './logo.svg';

// импорт страниц
import { CUser } from './components/user';
import { CFeed } from './components/feed';
import { CComments } from './components/post';
import { CreatePost } from './components/create_post';
import AuthReg from './components/auth_reg';
// import Header from './components/structure/header';
import { CHeader } from './components/structure/header';
import Footer from './components/structure/footer';
import Search from './components/search';
import Page404 from './components/404/page404';

// url проекта
export const url = 'http://hipstagram.node.ed.asmer.org.ua/'


const history = createHistory()


// Приватный роутинг - удалить, если не буду использовать

{
    // фейковый авторизатор
    const fakeAuth = {
        isAuthenticated: false,
        authenticate(cb) {
            this.isAuthenticated = true
            setTimeout(cb, 100)
        },
        signout(cb) {
            this.isAuthenticated = false
            setTimeout(cb, 100)
        }
    }



    // кнопка разлогина, которая рисуется, если залогинен
    const AuthButton = withRouter(({ history }) => (
        fakeAuth.isAuthenticated && (
            <p>
                Welcome! <button onClick={() => {
                    fakeAuth.signout(() => history.push('/'))
                }}>Sign out</button>
            </p>
        )
    ))

    const PrivateRoute = ({ component: Component, ...rest }) => (
        <Route {...rest} render={(props) => (
            typeof localStorage.authToken === 'string'
                ? <Component {...props} />
                : <Redirect to={{
                    pathname: '/authorization',
                    state: { from: props.location }
                }} />
        )} />
    )


}

// роутинг в зависимости от того.залогинен пользователь или нет
const MainRoutes = () => {
    const currentState = useSelector(state => state?.auth?.token)

    return (
        <main style={{ flexGrow: '1' }}>
            {currentState
                ? <Switch>
                    <Route path="/" component={CFeed} exact />
                    <Route path="/post/:postId" component={CComments} />
                    <Route path="/user/:userId" component={CUser} />
                    <Route path="/createpost" component={CreatePost} />
                    <Route path='/search' component={Search} />
                    <Route path="*" component={Page404} />
                </Switch>
                : <Switch>
                    <Route path="/" component={AuthReg} exact />
                    <Route path="/registration" component={AuthReg} />
                    {/* <Route path="/post/:postId" component={CComments} /> */}
                    {/* <Route path="/user/:userId" component={CUser} /> */}
                    <Route path="*" component={Page404} />
                </Switch>
            }
        </main>
    )
}


export default function App() {
    return (
        <Provider store={store}>
            <Router history={history}>
                <div className="wrapper">
                    <CHeader />
                    <MainRoutes />
                    <Footer />
                </div>
            </Router>
        </Provider>

    )
}