import React, { useContext, useState, useEffect } 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 Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

import JobLogView from "./JobLogView.jsx";

export default function JobView(props) {
  const navigate = useNavigate();
  const { state: jobState } = useContext(JobContext);
  const { job: initJob } = props;
  const [job, setJob] = useState({ log: [initJob.name] });

  function retryJob() {}

  function downloadLog() {}

  function navigateToJobs() {
    navigate("/jobs");
  }

  function onLog(d) {
    const j = { ...job };
    j.log.push(d);
    setJob(j);
  }

  return (
    <Box>
      <AppBar
        position="fixed"
        sx={{
          backgroundColor: "white",
          boxShadow: "none",
          color: "black",
        }}
      >
        <Toolbar disableGutters />
        <Box sx={{ flexGrow: 1, margin: "0 10px" }}>
          <Toolbar disableGutters>
            <Button onClick={navigateToJobs}>Back</Button>
            <Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
              {initJob.name}
            </Typography>
            <Button onClick={downloadLog}>Log</Button>
            <Button onClick={retryJob}>Retry</Button>
          </Toolbar>
        </Box>
      </AppBar>
      <Toolbar disableGutters />
      <button
        onClick={() => {
          const itvrl = setInterval(() => {
            onLog(Date.now());
          }, 100);
          setTimeout(() => clearInterval(itvrl), 5000);
        }}
      >
        Hello{" "}
      </button>

      <JobLogView log={job.log} />
    </Box>
  );
}
