import React from "react";
import PropTypes from "prop-types";
import AppLayout from "./layout/AppLayout";
import { BrowserRouter, Switch, Redirect, Route } from "react-router-dom";
import { useTuitioToken } from "@flare/tuitio-client-react";
import LoginContainer from "../features/login/components/LoginContainer";

const PrivateRoute = ({ component, ...rest }) => {
  const { valid } = useTuitioToken();

  return (
    <Route
      {...rest}
      render={props =>
        valid ? (
          React.createElement(component, props)
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: {
                from: props.location
              }
            }}
          />
        )
      }
    />
  );
};

PrivateRoute.propTypes = {
  component: PropTypes.func.isRequired,
  location: PropTypes.object
};

const PublicRoute = ({ component, ...rest }) => {
  const { valid } = useTuitioToken();
  return (
    <Route
      {...rest}
      render={props =>
        valid ? (
          <Redirect
            to={{
              pathname: "/"
            }}
          />
        ) : (
          React.createElement(component, props)
        )
      }
    />
  );
};

PublicRoute.propTypes = {
  component: PropTypes.func.isRequired
};

const App = () => {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/dashboard" />} />
        <PublicRoute path="/login" component={LoginContainer} />
        <PrivateRoute path="/" component={AppLayout} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;