import React from "react";
import Layout from "./Layout";
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
              }
            }}
          />
        )
      }
    />
  );
};

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

const AppWrapper = () => {
  return (
    <BrowserRouter basename={process.env.PUBLIC_URL || ""}>
      <Switch>
        <PublicRoute path="/login" component={LoginContainer} />
        <PrivateRoute path="/" component={Layout} />
      </Switch>
    </BrowserRouter>
  );
};

export default AppWrapper;