// Import necessary dependencies from Material-UI
import React, { useEffect, useState } from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import Checkbox from "@mui/material/Checkbox";
import Typography from "@mui/material/Typography";

// Define your CompactList component
const ColsListItems = ({ items, changeColsHandler }) => {
  // State to manage the checked items
  const [checkedItems, setCheckedItems] = useState(items);

  // Function to handle checkbox state changes
  const handleCheckboxChange = (item) => {
    const prevItems = checkedItems.filter((it) => it.name !== item.name);
    let newItem = { ...item };
    newItem.hide = !newItem.hide;

    const arrayOfObjects = [...prevItems, newItem];
    setCheckedItems(arrayOfObjects);
  };

  useEffect(() => {
    changeColsHandler(checkedItems);
  }, [checkedItems]);

  return (
    <List dense>
      {checkedItems.map((item) => (
        <ListItem key={item} dense>
          <Checkbox
            checked={!item.hide}
            onChange={() => handleCheckboxChange(item)}
          />
          <Typography variant="body2">{item.name}</Typography>
        </ListItem>
      ))}
    </List>
  );
};

export default ColsListItems;
