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