// Import default image
import "../img/noimage.png";

// Styles
import "../scss/app.scss";

// React
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import Container from "react-bootstrap/Container";

// Auth
import { ProtectedRoute, AdminRoute } from "./auth";

// Store
import store, { history } from "./store";

// Components
import { AdminPanel } from "./components/admins/panel";
import { Notifications } from "./components/notifications/notifications";
import { Alert } from "./components/alerts/alert";
import MovieList from "./components/movies/list";
import { MovieDetails } from "./components/movies/details";
import { AppNavBar } from "./components/navbar";
import { WsHandler } from "./components/websocket";
import { ShowDetails } from "./components/shows/details";
import ShowList from "./components/shows/list";
import { TorrentList } from "./components/torrents/list";
import { TorrentSearch } from "./components/torrents/search";
import { UserActivation } from "./components/users/activation";
import { UserLoginForm } from "./components/users/login";
import { UserLogout } from "./components/users/logout";
import { UserProfile } from "./components/users/profile";
import { UserSignUp } from "./components/users/signup";
import { UserTokens } from "./components/users/tokens";

const App = () => (
  <div>
    <WsHandler />
    <AppNavBar />
    <Alert />
    <Notifications />
    <Container fluid>
      <Switch>
        <AdminRoute path="/admin" exact component={AdminPanel} />
        <Route path="/users/profile" exact component={UserProfile} />
        <Route path="/users/tokens" exact component={UserTokens} />
        <Route path="/torrents/list" exact component={TorrentList} />
        <Route path="/torrents/search" exact component={TorrentSearch} />
        <Route
          path="/torrents/search/:type/:search"
          exact
          component={TorrentSearch}
        />
        <Route path="/movies/polochon" exact component={MovieList} />
        <Route path="/movies/wishlist" exact component={MovieList} />
        <Route path="/movies/details/:imdbId" exact component={MovieDetails} />
        <Route path="/movies/search/:search" exact component={MovieList} />
        <Route
          path="/movies/explore/:source/:category"
          exact
          component={MovieList}
        />
        <Route path="/shows/polochon" exact component={ShowList} />
        <Route path="/shows/wishlist" exact component={ShowList} />
        <Route path="/shows/search/:search" exact component={ShowList} />
        <Route
          path="/shows/explore/:source/:category"
          exact
          component={ShowList}
        />
        <Route path="/shows/details/:imdbId" exact component={ShowDetails} />
        <Route
          render={() => <Redirect to="/movies/explore/trakttv/trending" />}
        />
      </Switch>
    </Container>
  </div>
);

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/service-worker.js");
  });
}

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Switch>
        <Route path="/users/login" exact component={UserLoginForm} />
        <Route path="/users/logout" exact component={UserLogout} />
        <Route path="/users/signup" exact component={UserSignUp} />
        <Route path="/users/activation" exact component={UserActivation} />
        <ProtectedRoute path="*" component={App} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("app")
);