import Home from "../pages/mainPage";
import LogForm from "../pages/login";
import RegForm from "../pages/reg";
import React from "react";
import createHistory from "history/createBrowserHistory";
import { connect } from "react-redux";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import ConnectedPrivateRoute from "./privateRout";
import { Redirect } from "react-router";
import {useEffect, useState, useRef} from "react";
import ConnectCabinet from "../pages/cabinet";
import Search from "../pages/search";

const LoginForm = ({onLogin}) =>{
  const [login, setLogin] = useState(''); //braunvlad4
  const [pass, setPass] = useState('');   //123
  return( 
    <div className='LoginForm'>
      <input value={login} style={{backgroundColor: login.length>0 ? 'green' : 'red'}} 
            placeholder='your login' onChange={e=>setLogin(e.target.value)} />
      <input value={pass} style={{backgroundColor: pass.length>0 ? 'green' : 'red'}} 
            placeholder='your pass' onChange={e=>setPass(e.target.value)} />
      <button onClick={()=>onLogin(login,pass)} disabled={(login.length!==0 && pass.length!==0)?false:true }>Send</button>
    </div>
  )
}

const Routes = ({ isAuth }) => {
    return (
        <div className="App">
            <div className="contentDiv">
            <LoginForm onLogin={(l,p)=>console.log(l,p)} />
                <Switch>
                    <ConnectedPrivateRoute exact path="/" roles = {['user']} component={Home} />
                    <ConnectedPrivateRoute path="/cabinet" roles = {['user']} component={ConnectCabinet} />
                    <ConnectedPrivateRoute path="/search" roles = {['user']} component={Search} />
                    <ConnectedPrivateRoute path="/login" roles = {['noname']} component={LogForm} /> 
                    <ConnectedPrivateRoute path="/registration" roles = {['noname']} component={RegForm} />
                </Switch>
            </div>
        </div>
    );
};

export default Routes