import React, { useContext, useState, useEffect } from "react";

import StoreContext from "../../../ctx/StoreContext.jsx";

import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import Toolbar from "@mui/material/Toolbar";
import DialogTitle from "@mui/material/DialogTitle";

import ClickAwayListener from "@mui/material/ClickAwayListener";
import SpeedDial from "@mui/material/SpeedDial";
import SpeedDialAction from "@mui/material/SpeedDialAction";
import SpeedDialIcon from "@mui/material/SpeedDialIcon";

import PageviewIcon from "@mui/icons-material/Pageview";
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
import ViewCarouselIcon from "@mui/icons-material/ViewCarousel";

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

  const [quickOpen, setQuickOpen] = useState(false);
  const [jobDialogOpen, setJobDialogOpen] = useState(false);

  const quickOpenClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (!store.simplifiedControls) return setQuickOpen(!quickOpen);
    setJobDialogOpen(true);
  };

  const quickOpenClose = () => setQuickOpen(false);
  const handleClickOpen = () => setJobDialogOpen(true);

  const [cache, setCache] = useState({});

  const handleClose = (confirmed) => () => {
    setJobDialogOpen(false);
    if (!confirmed) return;
    jobBuilder(cache);
  };

  // Pull info from url if possible?
  const actions = [
    { name: "Suite", icon: <ViewCarouselIcon /> },
    { name: "Compound", icon: <ViewColumnIcon /> },
    { name: "Manual", icon: <PageviewIcon /> },
  ];

  return (
    <React.Fragment>
      <Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
        <Toolbar />
        <DialogTitle>New Job</DialogTitle>
        <DialogContent></DialogContent>
        <DialogActions>
          <Button onClick={handleClose()}>Cancel</Button>
          <Button onClick={handleClose(true)} autoFocus>
            Start
          </Button>
        </DialogActions>
      </Dialog>

      <ClickAwayListener onClickAway={quickOpenClose}>
        <SpeedDial
          ariaLabel="New Job"
          sx={{ position: "fixed", bottom: 16, right: 16 }}
          icon={<SpeedDialIcon />}
          onClick={quickOpenClick}
          open={quickOpen}
        >
          {actions.map((action) => (
            <SpeedDialAction
              key={action.name}
              icon={action.icon}
              tooltipTitle={action.name}
              onClick={handleClickOpen}
            />
          ))}
        </SpeedDial>
      </ClickAwayListener>
    </React.Fragment>
  );
}