import React, { useState, useContext } from "react";
import StoreContext from "@qltr/store";
import JobContext, { jobStatus } from "@qltr/jobs";
import { usePipelineIconState } from "@qltr/util/JobTools";

import Accordion from "@mui/material/Accordion";
import AccordionDetails from "@mui/material/AccordionDetails";
import AccordionSummary from "@mui/material/AccordionSummary";
import Typography from "@mui/material/Typography";

import IconButton from "@mui/material/IconButton";
import CheckIcon from "@mui/icons-material/Check";
import ClearIcon from "@mui/icons-material/Clear";
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
import PendingIcon from "@mui/icons-material/Pending";
import VisibilityIcon from "@mui/icons-material/Visibility";
import DoNotDisturbIcon from "@mui/icons-material/DoNotDisturb";

import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";

export default function JobPipelineBox(props) {
  const { pipeline } = props;
  const pipelineIcon = usePipelineIconState(pipeline);

  return (
    <Accordion expanded={false} disableGutters={true} square>
      <AccordionSummary
        style={{
          backgroundColor: "rgba(0, 0, 0, .03)",
          flexWrap: "wrap",
        }}
      >
        <Typography
          component={"span"}
          style={{ wordBreak: "break-word", margin: "auto 0" }}
        >
          {pipeline.id}
        </Typography>
        <Stack sx={{ ml: "auto" }}>
          <IconButton aria-label="" component="span">
            {pipelineIcon}
          </IconButton>
        </Stack>
      </AccordionSummary>
    </Accordion>
  );
}
