import { useState, useContext, useEffect } from "react";
import { useLocation } from "react-router-dom";

import StoreContext from "../ctx/StoreContext.jsx";
import JobContext from "../ctx/JobContext.jsx";
import JobBox from "./components/JobBox.jsx";
import JobTestSelector from "./components/JobTestSelector.jsx";
import JobView from "./components/JobView.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 Jobs() {
  const {
    state: jobState,
    dispatch: jobDispatch,
    jobBuilder,
  } = useContext(JobContext);
  const location = useLocation();
  const { state: store, updateStore } = useContext(StoreContext);
  const [quickOpen, setQuickOpen] = useState(false);
  const [jobDialogOpen, setJobDialogOpen] = useState(false);

  const actions = [
    { name: "Suite", icon: <ViewCarouselIcon /> },
    { name: "Compound", icon: <ViewColumnIcon /> },
    { name: "Manual", icon: <PageviewIcon /> },
  ];

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

  const handleClickOpen = () => setJobDialogOpen(true);

  const [queued, setQueued] = useState([]);
  useEffect(() => { }, [jobState.jobs, location]);

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

  return (
    <div className="jobs">
      {location.hash === "" && jobState.jobs.map((v, i) => (
        <a key={i} href={`/jobs#${v.name}`} style={{ textDecoration: 'none' }}><JobBox job={v} /></a>
      ))}
      {jobState.jobs.find((job)=>job.name===location.hash.slice(1)) && (
      <JobView job={jobState.jobs.find((job)=>job.name===location.hash.slice(1))}/>
      )}

      <Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
        <Toolbar />
        <DialogTitle>New Job</DialogTitle>
        <DialogContent>
          <span>Some Selectors</span>
          <JobTestSelector
            queued={queued}
            availableTests={store.catalog}
            setQueued={setQueued}
          />
        </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>
    </div>
  );
}