import React, { useContext } from "react";
import {useNavigate} from "react-router-dom";
import JobContext from "../../ctx/JobContext.jsx";
import Button from "@mui/material/Button";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";

import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";

function JobPipelineDisplay(props) {
  const { back, pipeline } = props;
  const {state: jobState} = useContext(JobContext);
  const navigate = useNavigate();
  const pipelineJobs = jobState.jobs.filter((j)=>j.isPipeline && j.pipelineId === pipeline.id);
  
  const selectJob = (testName) => () =>{
    const job  = pipelineJobs.find((j)=>j.branchId === testName);   
    if(!job) return;        navigate(`/qualiteer/jobs#${job.jobId}`);
  }
  
  return (
    <React.Fragment>
        <h3>{}</h3>
        {pipeline.branches.map((track, i) => (
          <React.Fragment key={i}>
            <Typography variant="h6">{i + 1}</Typography>
            <Box>
              {track.map((test, j) => (
                <Accordion
                  expanded={false}
                  disableGutters={true}
                  square
                  key={j}
                  onClick={selectJob(test)}
                >
                  <AccordionSummary
                    style={{
                      backgroundColor: "rgba(0, 0, 0, .03)",
                      flexWrap: "wrap",
                    }}
                  >
                    <Typography
                      component={"span"}
                      style={{ wordBreak: "break-word", margin: "auto 0" }}
                    >
                      {test}
                    </Typography>
                    <Stack sx={{ ml: "auto" }}>I</Stack>
                  </AccordionSummary>
                </Accordion>
              ))}
            </Box>
          </React.Fragment>
        ))}
    </React.Fragment>
  );
}

export default JobPipelineDisplay;