import React, { useContext, useState, useEffect } from "react";
import {useNavigate} from "react-router-dom";
import StoreContext from "../../../ctx/StoreContext.jsx";
import JobContext from "../../../ctx/JobContext.jsx";

import Dialog from "@mui/material/Dialog";
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";

import IndividualSelector from "./IndividualSelector.jsx";
import IndividualConfirm from "./IndividualConfirm.jsx";

import GroupSelector from "./GroupSelector.jsx";
import GroupConfirm from "./GroupConfirm.jsx";

import PipelineSelector from "./PipelineSelector.jsx";
import PipelineTrackSelector from "./PipelineTrackSelector.jsx";
import PipelineConfirm from "./PipelineConfirm.jsx";



export default function JobBuilder() {
  const navigate = useNavigate();
  const { state: store } = useContext(StoreContext);
  const { jobFactory } = useContext(JobContext);
  const [quickOpen, setQuickOpen] = useState(false);
  const [jobDialogOpen, setJobDialogOpen] = useState(false);

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

  const quickOpenClose = () => setQuickOpen(false);
  const handleClickOpen = (page)=> () =>{     
    setBuilderPage(page);
    setJobDialogOpen(true);
   }
  const [builderPage, setBuilderPage] = useState();
  const [cache, setCache] = useState({});

  const handleClose = (confirmed) => () => {
    setJobDialogOpen(false);
    if (!confirmed) return;
    const jobId = jobFactory(cache);
    if(store.focusJob)
    navigate(`/qualiteer/jobs#${jobId}`);
  };

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

  const changePage = (page) => () => setBuilderPage(page);

  const pages = {
    individualSelect:  <IndividualSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("individualConfirm")}/>,
    individualConfirm: <IndividualConfirm cache={cache} setCache={setCache} back={changePage("individualSelect")} start={handleClose(true)}/>,
    groupSelect:  <GroupSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("groupConfirm")}/>,
    groupConfirm: <GroupConfirm cache={cache} setCache={setCache} back={changePage("groupSelect")} start={handleClose(true)}/>,
    pipelineSelect:  <PipelineSelector cache={cache} setCache={setCache} cancel={handleClose()} next={changePage("pipelineTrackSelect")}/>,
    pipelineTrackSelect: <PipelineTrackSelector cache={cache} setCache={setCache} back={changePage("pipelineSelect")} next={changePage("pipelineConfirm")}/>,
    pipelineConfirm:  <PipelineConfirm cache={cache} back={changePage("pipelineTrackSelect")} next={handleClose(true)}/>
  }

  return (
    <React.Fragment>
      <Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
        <Toolbar />
        <DialogTitle>New Job</DialogTitle>
        {pages[builderPage]}
      </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(action.page)}
            />
          ))}
        </SpeedDial>
      </ClickAwayListener>
    </React.Fragment>
  );
}