import React, { useContext, useState, useEffect } from "react";
import StoreContext from "../../ctx/StoreContext.jsx";

import MultiOptionDialog from "./MultiOptionDialog.jsx";

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import Switch from "@mui/material/Switch";
import SummarizeIcon from "@mui/icons-material/Summarize";
import Typography from "@mui/material/Typography";

export default function Settings(props) {
  const { state: store, updateStore } = useContext(StoreContext);
  const { regions } = store;

  const defaultDialog = {
    title: "",
    options: [],
    current: null,
    onSelect: null,
    open: false,
  };
  const [dialog, setDialog] = useState(defaultDialog);

  const optionSettings = {
    region: {
      title: "Region",
      options: regions,
      current: store.defaultRegion,
      onSelect: (r) => updateStore({ defaultRegion: r }),
    },
    defaultPage: {
      title: "Default Page",
      options: store.pages,
      current: store.defaultPage,
      onSelect: (p) => updateStore({ defaultPage: p }),
    },
  };

  const handleOptionsMenu = (s) => {
    setDialog({ ...s, open: true });
  };

  const handleClose = (newValue, onSelect) => {
    setDialog({ ...dialog, open: false });
    if (!newValue) return;
    onSelect(newValue);
  };

  const handleToggle = (booleanSetting) => () => {
    const storeUpdate = {};
    storeUpdate[booleanSetting] = !store[booleanSetting];
    updateStore(storeUpdate);
  };

  function MultiOptionSubtext(props) {
    return (
      <React.Fragment>
        <Typography
          sx={{ display: "inline" }}
          component="span"
          variant="body2"
          color="primary"
        >
          {props.value}
        </Typography>
      </React.Fragment>
    );
  }

  return (
    <Box sx={{ width: "100%", bgcolor: "background.paper" }}>
      <List component="div" role="group">
        <ListItem
          button
          divider
          aria-haspopup="true"
          aria-label="default page"
          onClick={() => handleOptionsMenu(optionSettings.defaultPage)}
        >
          <ListItemText
            primary="Default Page"
            secondary={
              <MultiOptionSubtext value={optionSettings.defaultPage.current} />
            }
          />
        </ListItem>

        <ListItem
          button
          divider
          aria-haspopup="true"
          aria-label="region"
          onClick={() => handleOptionsMenu(optionSettings.region)}
          disabled={optionSettings.region.options.length === 0}
        >
          <ListItemText
            primary="Region"
            secondary={
              <MultiOptionSubtext value={optionSettings.region.current} />
            }
          />
        </ListItem>

        <ListItem button divider onClick={handleToggle("simplifiedControls")}>
          <ListItemText primary="Simplified Controls" />
          <Switch
            edge="end"
            onChange={handleToggle("simplifiedControls")}
            checked={store.simplifiedControls}
          />
        </ListItem>

        <ListItem button divider onClick={handleToggle("focusJob")}>
          <ListItemText primary="Focus New Jobs" />
          <Switch
            edge="end"
            onChange={handleToggle("focusJob")}
            checked={store.focusJob}
          />
        </ListItem>

        <ListItem button divider onClick={handleToggle("logAppDetails")}>
          <ListItemText primary="Log App Details" />
          <Switch
            edge="end"
            onChange={handleToggle("logAppDetails")}
            checked={store.logAppDetails}
          />
        </ListItem>

        <MultiOptionDialog
          id="multi-options-menu"
          keepMounted
          open={dialog.open}
          onClose={handleClose}
          dialog={dialog}
        />
      </List>
    </Box>
  );
}
