import { useEffect, useState } from "react";
import { useHistory, Route, Redirect}  from 'react-router-dom';
import { connect } from "react-redux";


const ProtectedRoute = ({fallback='/', 
                      roles=["admin"], 
                      auth,
                      ...routeProps}) => {
 
    const [acl, setAcl] = useState([]);
    const [access, setAccess] = useState(false);    
    let history = useHistory();

    useEffect(() => {
      if (auth && auth.payload && auth.payload.sub.acl.length !== 0) {            
        setAcl(auth.payload.sub.acl);                                                    
      } else setAcl('anon');                                                             
                                                                                        
      const newAcl = roles.filter((item) => acl.includes(item));                     
      if (newAcl.length) {
        setAccess(true);
      }
    })

    return (
      < >
        { access? <Route {...routeProps}/> : <Redirect to='/'/>}
      </>
    )  
}
//<CRoute roles={["anon", "user", "admin"]} path="/category/:_id" component={PageCategory} />
//<CRoute roles={["admin"]} path="/good/:_id" component={PageGood} />

const CRoute = connect(state => ({auth: state.auth}))(ProtectedRoute);

export default CRoute;