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 Header from "./components/Header";
import RegisterForm from "./components/RegisterForm";
import LoginForm from "./components/LoginForm";
import Lib from "./components/Library";
import Playlist from "./components/Playlist";//проверить правильные пути, поменять пути на соответствующие
import MyPlaylists from "./components/MyPlaylists";
import Search from "./components/Search";

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

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

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