import { useContext, useState, useEffect } from "react";
import JobContext from "../../ctx/JobContext.jsx";

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

export default function JobLogView(props) {
  const { log } = props;

  const LoadingDot = () => (<Skeleton variant="circular" width={16} height={16} sx={{backgroundColor:"rgb(240,240,240)"}}/>)
  
  return (
    <Box
      style={{
        background: "black",
        color: "white",
        padding: "1rem 0.5rem",
        wordBreak: "break-all",
      }}
    >
      {log.map((l, i) => (
        <Box className="line" key={i} sx={{margin: ".25rem 0px"}}>
          <Typography
            variant="body2"
            component="div"
            sx={{ display: "flex", overflowWrap: "anywhere" }}
          >
            <Box
              className="line-number"
              sx={{
                display: "flex",
                margin: "0px 0.5rem",
                color: "rgb(210,210,210)",

                justifyContent:"center",
                minWidth:"2rem"
              }}
            >
              {i + 1}
            </Box>
            <Box
              className="line-content"
              sx={{ display: "flex", mr: ".5rem", color: "rgb(240,240,240)" }}
            >
              {" "}
              {l}
            </Box>
          </Typography>
        </Box>
      ))}
      <Stack direction="row" spacing={1} sx={{mt:".5rem", ml:"0.75rem"}}>
        <LoadingDot/>
        <LoadingDot/>
        <LoadingDot/>
      </Stack>
    </Box>
  );
}
