import { useState } from 'react';
import './App.css';
import deLocale from 'date-fns/locale/de';
import { AppBar, Box, Button, createTheme, CssBaseline, Paper, ThemeProvider, Toolbar, Typography } from '@mui/material';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { Todos } from './components/Todos';
import { Dinos } from './components/Dinos';
import { Schedule } from './components/Schedule';

const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#aa00ff',
    },
    secondary: {
      main: '#00b0ff',
    },
  },
});

function Calendar(){
return(
    <Typography variant="h3">Calendar</Typography>
)
}

function Overview(){
  return (
    <div style={{display: "flex", flexGrow: 1, flexDirection: "column", height: "100%", maxHeight: "100%"}}>
      <div><Typography variant="h2">Overview</Typography></div>
      <Box sx={{display: "flex", flexGrow: 1, justifyContent: "space-evenly", gap: 4, height: "100%", minHeight: 0}}>
          <Paper sx={{overflowY: "auto", width: "100%", padding: 2, height: "calc(100% - 32px)"}}><Todos/></Paper>
        <Box sx={{width: "100%", display: "flex", flexDirection: "column", justifyContent: "space-evenly"}}>
          <Calendar/>
          <Schedule/>
        </Box>
      </Box>
</div>
  )
}

const pages = ['Overview', 'Todos', 'Calendar', 'Dinos'];

function App() {
  const [page,setPage] = useState<string>("Overview");
  return (
    <>
    <ThemeProvider theme={theme}>
    <CssBaseline/>
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={deLocale}>
      <AppBar>
        <Toolbar>
        <Typography variant="h5"
              noWrap
              component="div"
              //sx={{ flexGrow: 0, display: { xs: 'flex', md: 'none' } }}
              >
                ToDinos
              </Typography>
          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
          {pages.map((page) => 
            <Button key={page} onClick={() => setPage(page)} sx={{ my: 2, color: 'white', display: 'block' }}>
              {page}
            </Button>
          )}
          </Box>
        </Toolbar>
      </AppBar>
      <div style={{display: "flex", flexDirection: "column", gap: 2, height: "100%", maxHeight: "100%"}}>
        <Toolbar sx={{flexGrow: 1}}/>
        <div style={{marginLeft: "1em", marginRight: "1em", flexGrow: 1, height: "100%", maxHeight: "100%", minHeight: 0}}>
          {page === "Overview" && <Overview/>}
          {page === "Todos" && <Todos/>}
          {page === "Calendar" && <Calendar/>}
          {page === "Dinos" && <Dinos/>}
          </div>
        </div>
        </LocalizationProvider>
      </ThemeProvider>
    </>
  );
}

export default App;