import React, { useContext, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";

import JobContext from "@qltr/jobctx";
import JobBox from "./JobBox.jsx";
import JobPipelineBox from "./JobPipelineBox.jsx";
import JobView from "./JobView.jsx";
import JobPipelineDisplay from "./JobPipelineDisplay.jsx";
import JobBuilder from "./builder/JobBuilder.jsx";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";

export default function Jobs() {
  const { state: jobState } = useContext(JobContext);
  const location = useLocation();
  const navigate = useNavigate();

  const jobViewPrefix = "#job-";
  const pipelineViewPrefix = "#pipeline-";
  const cachePrefix = "#cache-";

  function jobHashLoader() {
    const { hash } = location;
    if (!hash) return { hash };
    const jobIndex = hash.indexOf(jobViewPrefix);
    const pipelineIndex = hash.indexOf(pipelineViewPrefix);
    const cacheIndex = hash.indexOf(cachePrefix);
    const jobId = jobIndex !== 0 ? null : hash.slice(jobViewPrefix.length);
    const pipelineId =
      pipelineIndex !== 0 ? null : hash.slice(pipelineViewPrefix.length);
    const cacheData = cacheIndex !== 0 ? null : hash.slice(cachePrefix.length);
    const job = !jobId ? null : jobState.jobs.find((j) => j.jobId === jobId);
    const pipeline = !pipelineId
      ? null
      : jobState.pipelines.find((p) => p.id === pipelineId);
    const builderCache = !cacheData ? null : { fakedata: "yep" };
    return { job, pipeline, builderCache, hash };
  }

  const jobHash = jobHashLoader();

  useEffect(() => {
    const { job, pipeline, builderCache, hash } = jobHash;
    if (!hash) return;
    if (!job && !pipeline && !builderCache) navigate("/qualiteer/jobs");
  });

  return (
    <div className="jobs">
      {jobState.jobs.length === 0 ? (
        <React.Fragment>
          <Box
            display="flex"
            alignItems="center"
            justifyContent="center"
            sx={{ flexFlow: "wrap" }}
          >
            <Typography variant="h4" sx={{ textAlign: "center" }}>
              No jobs found!
            </Typography>
          </Box>
          <Box
            display="flex"
            alignItems="center"
            justifyContent="center"
            sx={{ flexFlow: "wrap" }}
          >
            <Typography variant="h5" sx={{ textAlign: "center" }}>
              Click the '+' to start a new one!
            </Typography>
          </Box>
        </React.Fragment>
      ) : null}

      <JobBuilder />

      {location.hash === "" && (
        <React.Fragment>
          {jobState.jobs
            .filter((j) => !j.isPipeline)
            .map((v, i) => (
              <a
                key={i}
                href={`/qualiteer/jobs#job-${v.jobId}`}
                style={{ textDecoration: "none" }}
              >
                <JobBox job={v} />
              </a>
            ))}
          {jobState.pipelines.map((p, i) => (
            <a
              key={i}
              style={{ textDecoration: "none" }}
              href={`/qualiteer/jobs#pipeline-${p.id}`}
            >
              <JobPipelineBox pipeline={p} />
            </a>
          ))}
        </React.Fragment>
      )}

      {jobHash.pipeline && <JobPipelineDisplay pipeline={jobHash.pipeline} />}
      {jobHash.job && <JobView job={jobHash.job} />}
    </div>
  );
}