import {connect} from 'react-redux';
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
import createHistory from "history/createBrowserHistory";
import { ConnectLoginForm } from './LoginForm';
import { ConnectRegistrForm } from './RegistrForm';
import { ConnectUsersDraw } from './UserDraw'
import  { ConnectPosts } from './Post'
import { ConnectUploadForm } from './UploadForm';
import { UserProfileDraw } from './Profile';
import { ConnectNavBar } from './Header'

function Routs({isLoggedIn}) {
    return (
        <>
          <Router history={createHistory()}>
          { !isLoggedIn && 
            <Switch>
              <Route path='/login' component={ConnectLoginForm}/>
              <Route path="/reg" component={ConnectRegistrForm}/>
              <Route path='/*'>
                  <Redirect to="/login"/>
              </Route>
              </Switch>
            }
            { isLoggedIn &&
            <>
              <ConnectNavBar/>
              <Switch>
                <Route path='/login'>
                    <Redirect to="/"/>
                </Route>
                <Route exact path="/" component={ConnectPosts}/>
                <Route path="/input" component={ConnectUploadForm}/>
                <Route path = {`/user/:id`} component={UserProfileDraw}/>
                <Route path="/users" component={ConnectUsersDraw}/>
              </Switch>
            </>
          }
            </Router>
        </>
    )
  }

  export const ConnectedRouts = connect(state => ({isLoggedIn: state?.auth.token}), null)(Routs)