import React, { useContext, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import StoreContext from "@qltr/store";
import JobContext from "@qltr/jobs";

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 ManualSelector from "./ManualSelector.jsx";
import ManualConfirm from "./ManualConfirm.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("groupSelect");
    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: "manualSelect" },
  ];

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

  const pages = {
    manualSelect: (
      <ManualSelector
        cache={cache}
        setCache={setCache}
        cancel={handleClose()}
        next={changePage("manualConfirm")}
      />
    ),
    manualConfirm: (
      <ManualConfirm
        cache={cache}
        setCache={setCache}
        back={changePage("manualSelect")}
        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")}
        start={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>
  );
}
