// Route
import { BrowserRouter, Routes, Route } from "react-router-dom";

// Components
import Header from './Header'
import CoinList from './coinList/coinList';
import CoinDetails from './coinDetails/coinDetails';

import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';

const ColorModeContext = React.createContext({ toggleColorMode: () => { } });

function App() {
  const [mode, setMode] = React.useState<'light' | 'dark'>('light');
  const colorMode = React.useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
      },
    }),
    [],
  );
  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode,
        },
      }),
    [mode],
  );

  return (
    <div className="App">
      <BrowserRouter>
      <ColorModeContext.Provider value={colorMode}>
        <ThemeProvider theme={theme}>
          <Header colorMode={colorMode} theme={theme} />
          <Container maxWidth="md">
            <Box sx={{ flexGrow: 1 }}>
              <Grid container
                spacing={0}
                direction="column"
                justifyContent="center"
              >
                <Routes>
                  <Route path="/" element={<CoinList />} />
                  <Route path="/coin/:id" element={<CoinDetails />} />
                </Routes>
              </Grid>
            </Box>
          </Container>
        </ThemeProvider>
      </ColorModeContext.Provider>
      </BrowserRouter>
    </div>
  );
}

export default App;
