import store from "@/store";
import { Provider, useSelector } from "react-redux";
import CssBaseline from "@mui/material/CssBaseline";
import Router from "./router";
import { HelmetProvider } from "react-helmet-async";
import React from "react";
import "./App.less";
import Slide from "@mui/material/Slide";
import { useDispatch } from "react-redux";
import { changemessage } from "@/store/message";
import ThemeProvider from "./theme";
import Snackbar from "@mui/material/Snackbar";
import MuiAlert from "@mui/material/Alert";
import { AlertTitle } from "@mui/material";

const Alert = React.forwardRef(function Alert(props, ref) {
  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});

function Dom() {
  const dispatch = useDispatch();
  const message = useSelector((state) => state.message);
  const handleClose = (event) => {
    dispatch(
      changemessage({
        ...message,
        open: false,
      })
    );
  };

  // 自定义主题
  // const { palette } = useTheme();
  // const theme = useMemo(() => {
  //   return createTheme(curthemeconfig);
  // }, [curthemeconfig]);

  return (
    <ThemeProvider>
      {/* <div style={{ position: "fixed", right: 36, top: 36 }}>
        <IconButton
          onClick={() => {
            if (curthemeconfig.palette.mode == "dark") {
              dispatch(changetheme("lightTheme"));
            } else {
              dispatch(changetheme("darkTheme"));
            }
          }}
        >
          {curthemeconfig.palette.mode !== "dark" ? (
            <WbSunnyIcon style={{ color: "#ff9900" }}></WbSunnyIcon>
          ) : (
            <DarkModeIcon></DarkModeIcon>
          )}
        </IconButton>
      </div> */}
      <CssBaseline />
      <Snackbar
        open={message?.open}
        TransitionComponent={(props) => <Slide {...props} direction="left" />}
        {...message?.snackbar}
        onClose={handleClose}
      >
        <Alert
          severity={message?.type}
          onClose={handleClose}
          {...message.alert}
        >
          {message?.title ? <AlertTitle>{message?.title}</AlertTitle> : null}
          {message?.content}
        </Alert>
      </Snackbar>
      <Router />
    </ThemeProvider>
  );
}

// 路由&theme+mui
function App() {
  return (
    <HelmetProvider>
      <Provider store={store}>
        <Dom></Dom>
      </Provider>
    </HelmetProvider>
  );
}

export default App;
