import React from "react";
import "./App.scss";
import TopBar from "./components/TopBar";
import LogoMain from "./components/logoMain";
import Footer from "./components/Footer";
import SearchPanel from "./components/SearchPanel";
import SearchResults from "./components/SearchResults";
import Restaurant from "./components/Restaurant";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { useSelector } from "react-redux";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#0e8496",
    },
  },
});

function App() {
  const appMode = useSelector((store) => store.appMode);

  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <TopBar />
        <div className="main-container">
          <LogoMain />
          {(appMode === "init" || appMode === "search results") && (
            <SearchPanel />
          )}
          {appMode === "init" && (
            <p className="darkParagraph">
              Sprawdź co serwuje Twoja ulubiona restauracja.
            </p>
          )}
          {appMode === "search results" && <SearchResults />}
          {appMode === "restaurant" && <Restaurant />}
        </div>
        <Footer />
      </div>
    </ThemeProvider>
  );
}

export default App;