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


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,
    jobUpdate,
    jobCreate,
  } = useContext(JobContext);

  const { state: store, updateStore } = useContext(StoreContext);

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

  const quickOpenClick = () => setQuickOpen(!quickOpen);
  const quickOpenClose = () => setQuickOpen(false);
  
  const actions = [
    {name: "Suite", icon: <ViewCarouselIcon/>}, {name: "Compound", icon: <ViewColumnIcon/>}, {name: "Manual", icon: <PageviewIcon/>}
  ]
  
  return (
    <div className="jobs">
    <ClickAwayListener onClickAway={quickOpenClose}>
      <SpeedDial
        ariaLabel="New Job"
        sx={{ position: 'absolute', bottom: 16, right: 16 }}
        icon={<SpeedDialIcon />}
        onClick={quickOpenClick}
        open={quickOpen}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
          />
        ))}
      </SpeedDial>
    </ClickAwayListener>
    </div>
  );
}