import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MailIcon from "@mui/icons-material/Mail";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import LogoutIcon from "@mui/icons-material/Logout";
import Container from "@mui/material/Container";
import GeneralSettingsPage from "./settingsSubpages/generalSettingsPage";
import { Link, Route, Switch, useRouteMatch } from "react-router-dom";
import GamerunsPage from "./settingsSubpages/gamerunsPage";
import SettingsIcon from "@mui/icons-material/Settings";
import EmailInfoPage from "./settingsSubpages/emailInfoPage";
import GamerunInfoPage from "./settingsSubpages/gamerunInfoPage";
import EmailsPage from "./settingsSubpages/emailsPage";
import EmailForm from "../components/EmailForm";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { loadUser, logout } from "../store/auth/actions";
import { useEffect, useState } from "react";
import ImportEmailPage from "./settingsSubpages/importEmailPage";
import { useHistory } from "react-router";
import store from "../store";
import SportsEsportsIcon from "@mui/icons-material/SportsEsports";

const drawerWidth = 240;

const Routes = {
  Home: "/",
  General: "/settings",
  Emails: "/settings/emails",
  Gameruns: "/settings/gameruns",
  ImportEmail: "/settings/emails/import",
  CreateEmail: "/settings/emails/create",
  EmailDetail: "/settings/emails/:id",
  GamerunDetail: "/settings/gameruns/:id",
};

// Main Settings page, contains only drawer (navigating to general/emails/gameruns) and Appbar
function SettingsPage(props) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [openedPage, setOpenedPage] = useState("");
  const history = useHistory();

  useEffect(() => {
    if (window.location.pathname.includes("emails")) {
      setOpenedPage("Emails");
    } else if (window.location.pathname.includes("gameruns")) {
      setOpenedPage("Gameruns");
    } else {
      setOpenedPage("General");
    }
  }, [window.location.pathname]);

  // handler for opening navbar on mobiles
  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const MenuItem = ({ text, navigateTo, icon }) => {
    return (
      <Box
        component={Link}
        to={navigateTo} // navigate to /settings/:text
        style={{ textDecoration: "none", color: "#ffffff" }}
      >
        <ListItem button>
          <ListItemIcon>{icon}</ListItemIcon>
          <ListItemText primary={text} />
        </ListItem>
      </Box>
    );
  };

  const drawer = (
    <div>
      <Toolbar />
      <Divider />
      <List>
        <MenuItem
          text={"General"}
          navigateTo={Routes.General}
          icon={<SettingsIcon />}
        />
        <MenuItem
          text={"Emails"}
          navigateTo={Routes.Emails}
          icon={<MailIcon />}
        />
        <MenuItem
          text={"Gameruns"}
          navigateTo={Routes.Gameruns}
          icon={<SportsEsportsIcon />}
        />

        <Link style={{ textDecoration: "none", color: "#ffffff" }} to="/">
          <ListItem
            button
            key={"Logout"}
            onClick={props.logout}
            sx={{ mt: 40 }}
          >
            <ListItemIcon>
              <LogoutIcon />
            </ListItemIcon>
            <ListItemText primary={"Logout"} />
          </ListItem>
        </Link>
      </List>
    </div>
  );

  return (
    // AppBar
    <Box sx={{ display: "flex" }}>
      <AppBar
        position="fixed"
        sx={{
          width: { sm: `calc(100% - ${drawerWidth}px)` },
          ml: { sm: `${drawerWidth}px` },
        }}
      >
        <Toolbar>
          <IconButton
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: "none" } }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            {openedPage}
          </Typography>
        </Toolbar>
      </AppBar>
      {/* Navigation Menu */}
      <Box
        component="nav"
        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
      >
        <Drawer
          variant="temporary"
          open={mobileOpen}
          onClose={handleDrawerToggle}
          ModalProps={{
            keepMounted: true,
          }}
          sx={{
            display: { xs: "block", sm: "none" },
            "& .MuiDrawer-paper": {
              boxSizing: "border-box",
              width: drawerWidth,
            },
          }}
        >
          {drawer}
        </Drawer>
        <Drawer
          variant="permanent"
          sx={{
            display: { xs: "none", sm: "block" },
            "& .MuiDrawer-paper": {
              boxSizing: "border-box",
              width: drawerWidth,
            },
          }}
        >
          {drawer}
        </Drawer>
      </Box>
      {/* Container with routing to different pages */}
      <Container>
        <Toolbar />
        <Switch>
          {/* route to general settings */}
          <Route path={Routes.General} exact component={GeneralSettingsPage} />
          {/* route to email page with EmailTable */}
          <Route path={Routes.Emails} exact component={EmailsPage} />
          {/* route to gamerun page with GamerunTable */}
          <Route path={Routes.Gameruns} exact component={GamerunsPage} />
          <Route path={Routes.CreateEmail} exact component={EmailForm} />
          <Route path={Routes.ImportEmail} exact component={ImportEmailPage} />
          {/* route to page containing info about email */}
          <Route path={Routes.EmailDetail} exact component={EmailInfoPage} />
          {/* route to page containing info about gamerun */}
          <Route
            path={Routes.GamerunDetail}
            exact
            component={GamerunInfoPage}
          />
          {/* route to page with form for creating new email */}
        </Switch>
      </Container>
    </Box>
  );
}

// SettingsPage.propTypes = {
//   logout: PropTypes.func.isRequired,
//   loadUser: PropTypes.func.isRequired,
// };
//
// const mapStateToProps = (state) => ({
//   logout: state.logout,
//   loadUser: state.loadUser, //added
// });

export default connect(null, { logout, loadUser })(SettingsPage);
