import { useState, useEffect } from "react";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";

export default function JobTestSelector(props) {
  const { availableTests, queued, setQueued } = props;

  useEffect(() => {}, [availableTests]);

  const queueTest = (test) => () => {
    const q = [...queued];
    const testIndex = q.indexOf(test);
    if (testIndex === -1) q.push(test);
    else q.splice(testIndex, 1);
    setQueued(q);
  };

  return (
    <Box style={{ overflow: "auto", maxHeight: 250 }}>
      <List>
        {availableTests.map((v, i) => (
          <ListItem
            key={i}
            secondaryAction={
              <Checkbox edge="end" checked={queued.includes(v)} />
            }
            disablePadding
            onClick={queueTest(v)}
          >
            <ListItemButton key={i}>
              <ListItemText
                primary={
                  <span>
                    {v.class}#<strong>{v.name}</strong>
                  </span>
                }
                style={{ wordBreak: "break-word" }}
              />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Box>
  );
}
