import ListGroupBS from "./components/ListGroupBS";
import MyAlert from "./components/Alert";
import { useState } from "react";
import MyButt from "./components/MyButt";
import Button from "@mui/material/Button";
import Alert from "@mui/material/Alert";
import ListGroupMUI from "./components/ListGroupMUI";
import { createTheme } from "@mui/material/styles";
import { ThemeProvider } from "@emotion/react";
import { dark } from "@mui/material/styles/createPalette";
import { Box, CssBaseline } from "@mui/material";
import { blue, pink } from "@mui/material/colors";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";

// Following tutorial https://www.youtube.com/watch?v=SqcY0GlETPk

function App() {
  const items = ["Dude", "Man", "Shit", "Is it working?"];
  const [alertVisible, setAlertVisible] = useState(false);

  const handleSelectItem = (item: string) => {
    console.debug(item);
  };

  const dismissError = () => {
    setAlertVisible(false);
  };

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

  const customTheme = createTheme({
    palette: {
      mode: "light",
      primary: blue,
      secondary: pink,
    },
    components: {
      MuiListItemButton: {
        styleOverrides: {
          root: {
            backgroundColor: "#00ff00",
            accentColor: "#00ff00",
            caretColor: "#00ff00",
          },
        },
      },
      MuiListItemText: {
        styleOverrides: {
          primary: {
            color: "red",
            background: "black",
          },
          secondary: {
            color: "yellow",
            background: "grey",
          },
        },
      },
    },
  });

  return (
    <ThemeProvider theme={customTheme}>
      <BrowserRouter></BrowserRouter>
      <CssBaseline />
      <div>
        {alertVisible && (
          <Alert onClose={() => setAlertVisible(false)} severity="error">
            This is bad
          </Alert>
        )}
        <MyButt name="LöBöttån!" onClick={() => setAlertVisible(true)}>
          Maan
        </MyButt>
        <Button
          disabled={alertVisible}
          variant="contained"
          onMouseEnter={() => setAlertVisible(true)}
        >
          Hello World
        </Button>
        <ListGroupBS
          items={items}
          heading="Man shit list"
          onSelectItem={handleSelectItem}
        />
        <ListGroupBS
          items={["Hoho", "Hihi", "Thhihih"]}
          heading="Skrat prat datt"
          onSelectItem={handleSelectItem}
        />
        <Box width={360}>
          <ListGroupMUI
            items={["This", "is", "MUI"]}
            heading="MAGGA BAGGA HAGGA"
            onSelectItem={handleSelectItem}
          />
        </Box>
      </div>
    </ThemeProvider>
  );
}

export default App;