import { useState } from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { SnackbarProvider } from 'notistack';

import NavbarComponent from './Navbar';
import SearchComponent from './Search';
import ResultComponent from './Result';

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
});

export default function App() {
  const [zip, setZip] = useState(0);
  const [city, setCity] = useState("");

  function handleSearch(value, zip, city) {
    setZip(zip);
    setCity(city);

    if (window.history.replaceState) {
      value = encodeURIComponent(value);
      window.history.replaceState({}, null, `?s=${value}`);
    }
  }

  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <SnackbarProvider>
        <NavbarComponent />
        <Container sx={{ marginY: "1rem" }}>
          <SearchComponent callback={handleSearch} />
        </Container>
        <Container sx={{ marginBottom: "2rem" }}>
          <ResultComponent zip={zip} city={city} />
        </Container>
      </SnackbarProvider>
    </ThemeProvider>
  );
}