import React, { useEffect, useState } from "react";

import {
  BrowserRouter as Router,
  Route,
  Redirect,
  Switch,
} from "react-router-dom";
import { connect } from "react-redux";

import { Provider } from "react-redux";
import store from "./store";
import history from "./utils/history";
// import {ConnectedRouter} from 'react-router-redux';

import "./styles/Reset.css";
import "./styles/App.css";

import RegisterForm from "./components/RegisterForm";
import LoginForm from "./components/LoginForm";
import Lib from "./components/Library";
import Playlist from "./components/Playlist";

const PrivateRoute = (props) => {
  console.log(props);
  const { children, ...rest } = props;

  return (
    <Route
      {...rest}
      render={({ location }) => {
        return localStorage.authToken ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location },
            }}
          />
        );
      }}
    />
  );
};

export default () => {
  return (
    <Provider store={store}>
      <div className="App">
        {/* <Router history={history}> */}
        <Router history={history}>
          <Switch>
            <Route exact path="/" component={RegisterForm} />
            <Route exact path="/login" component={LoginForm} />
            <Route exact path="/playlist" component={Playlist} />
            <PrivateRoute path="/private">
              <Lib />
            </PrivateRoute>
          </Switch>
        </Router>
      </div>
    </Provider>
  );
};