import "./styles/App.scss";
import { HashRouter as Router, Route, Routes, useLocation } from "react-router-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./services/store";
import Header from "./components/Header";
import PosterSelector from "./pages/PosterSelector";
import PosterGallery from "./pages/PosterGallery";
import UploadDiary from "./pages/UploadDiary";
import SelectionRecap from "./pages/SelectionRecap";

function AppContent() {
  const location = useLocation();
  return (
    <div className="App">
      {location.pathname !== "/" && <Header />}
      <Routes>
        <Route path="/" element={<UploadDiary />} />
        <Route path="/PosterSelector" element={<PosterSelector />} />
        <Route path="/posters/:movieName/:movieYear" element={<PosterGallery />} />
        <Route path="/recap" element={<SelectionRecap />} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router>
          <AppContent />
        </Router>
      </PersistGate>
    </Provider>
  );
}

export default App;
