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>
  );
}