front/src/pages/Inference/CustomizeVST/CustomizeVST.tsx

import {
  DeveloperBoardOutlined
} from "@mui/icons-material";
import {
  Box,
  Button,
  Card,
  CardActions,
  CardContent,
  Checkbox,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography
} from "@mui/material";
import { useState } from "react";
import { Link } from "react-router-dom";
import MainContainer from "../../../components/Container/MainContainer";

const CustomizeVST = () => {
  type DataType = {
    [key: string]: number | number[];
  };

  const data: DataType = {
    item1: 1,
    item2: 42,
    item3: 2,
    item4: 7,
    item5: [3, 2],
  };

  type Column = {
    id: string;
    label: string;
  };

  const columns: Column[] = [
    { id: "checkbox", label: "Enabled" },
    { id: "name", label: "Name" },
    { id: "value", label: "Value" },
  ];

  const [selectedItems, setSelectedItems] = useState<string[]>([]);
  const [editedValues, setEditedValues] = useState<DataType>({});

  const handleCheckboxChange = (itemName: string) => {
    if (selectedItems.includes(itemName)) {
      setSelectedItems(selectedItems.filter((item) => item !== itemName));
    } else {
      setSelectedItems([...selectedItems, itemName]);
    }
  };

  const handleValueChange = (itemName: string, value: number | number[]) => {
    setEditedValues((prevValues) => ({
      ...prevValues,
      [itemName]: value,
    }));
  };

  return (
    <>
      <MainContainer>
        <Box
          sx={{
            justifyContent: "center",
            display: "flex",
            height: "99%",
            alignItems: "center",
          }}
        >
          <Card variant={"filled"} sx={{ width: "30vw" }}>
            <Box>
              <CardContent
                sx={{
                  display: "grid",
                  justifyItems: "center",
                  alignItems: "center",
                }}
              >
                <DeveloperBoardOutlined sx={{ fontSize: "50px" }} />
                <Typography
                  sx={{ fontFamily: "monospace", pt: 1, fontSize: "50px" }}
                >
                  VST Name
                </Typography>
                <Typography sx={{ fontFamily: "monospace", pb: 1 }}>
                  Properties available
                </Typography>
                <TableContainer sx={{}}>
                  <Table>
                    <TableHead>
                      <TableRow>
                        {columns.map((column) => (
                          <TableCell key={column.id}>{column.label}</TableCell>
                        ))}
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {Object.keys(data).map((itemName) => (
                        <TableRow key={itemName}>
                          <TableCell>
                            <Checkbox
                              checked={selectedItems.includes(itemName)}
                              onChange={() => handleCheckboxChange(itemName)}
                            />
                          </TableCell>
                          <TableCell>{itemName}</TableCell>
                          <TableCell>
                            {Array.isArray(data[itemName]) ? (
                              <>
                                <TextField
                                  type="number"
                                  value={
                                    editedValues[itemName] !== undefined
                                      ? editedValues[itemName]
                                      : data[itemName]
                                  }
                                  onChange={(e) =>
                                    handleValueChange(
                                      itemName,
                                      Number(e.target.value)
                                    )
                                  }
                                />
                                <TextField
                                  type="number"
                                  value={
                                    editedValues[itemName] !== undefined
                                      ? editedValues[itemName]
                                      : data[itemName]
                                  }
                                  onChange={(e) =>
                                    handleValueChange(
                                      itemName,
                                      Number(e.target.value)
                                    )
                                  }
                                />
                              </>
                            ) : (
                              <TextField
                                sx={{
                                  width: "100px",
                                  WebkitAppearance: "none",
                                  margin: 0,
                                }}
                                type="number"
                                value={
                                  editedValues[itemName] !== undefined
                                    ? editedValues[itemName]
                                    : data[itemName]
                                }
                                onChange={(e) =>
                                  handleValueChange(
                                    itemName,
                                    Number(e.target.value)
                                  )
                                }
                              />
                            )}
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </TableContainer>
              </CardContent>
              <CardActions sx={{ display: "flex", justifyContent: "flex-end" }}>
                <Button variant="filled" component={Link} to="/Results">
                  Next
                </Button>
              </CardActions>
            </Box>
          </Card>
        </Box>
      </MainContainer>
    </>
  );
};

export default CustomizeVST;