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

import Box from "@mui/material/Box";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";

import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import Stack from "@mui/material/Stack";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

function JobPipelineDisplay(props) {
  const { back, pipeline } = props;
  const {
    state: jobState,
    pipelineCancel,
    pipelineDestroy,
  } = useContext(JobContext);
  const navigate = useNavigate();
  const pipelineJobs = jobState.jobs.filter(
    (j) => j.isPipeline && j.pipelineId === pipeline.id
  );
  const selectedBranches = () => {
    return pipeline.branches.map((b) => {
      return b.filter((t) => pipeline.selectedBranches.includes(t));
    });
  };

  const selectJob = (testName) => () => {
    const job = pipelineJobs.find((j) => j.branchId === testName);
    if (!job) return;
    navigate(`/qualiteer/jobs#${job.jobId}`);
  };

  function navigateToJobs() {
    navigate(`/qualiteer/jobs`);
  }

  function cancelPipeline() {
    pipelineCancel(pipeline.id);
  }

  function deletePipeline() {
    pipelineDestroy(pipeline.id);
  }

  return (
    <Box>
      <AppBar
        position="fixed"
        sx={{
          backgroundColor: "white",
          boxShadow: "none",
          color: "black",
        }}
      >
        <Toolbar disableGutters />
        <Box sx={{ flexGrow: 1, margin: "0 10px" }}>
          <Toolbar disableGutters>
            <IconButton onClick={navigateToJobs}>
              <ArrowBackIcon />
            </IconButton>
            <Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
              {pipeline.id}
            </Typography>
            <IconButton onClick={cancelPipeline}>
              <ArrowBackIcon />
            </IconButton>
            <IconButton onClick={deletePipeline}>
              <ArrowBackIcon />
            </IconButton>
          </Toolbar>
        </Box>
      </AppBar>
      <Toolbar disableGutters />
      {selectedBranches().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>
      ))}
    </Box>
  );
}

export default JobPipelineDisplay;