rubix-explore/src/components/DataTable/NormalTable.jsx

import React from "react";
import {
  Table,
  TableContainer,
  Tbody,
  Td,
  Th,
  Thead,
  Tr,
  Skeleton,
  TableCaption,
  Checkbox,
  Radio,
  useColorMode,
} from "@chakra-ui/react";
import { TABLE_PAGINATION } from "../../Constants/Paginations";

const NormalTable = ({
  data,
  isLoading,
  tableHeadRow,
  emptyMessage,
  centered,
  total,
  showRadioButton, // Prop for showing the checkboxes
  selectedRadio,
  setSelectedRadio, // State for managing selected checkboxes

  handleCheckboxChange: radioChange,
  radio
}) => {
  const columnWidth =
    data && data[0]
      ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
      : "auto";

      const { colorMode} = useColorMode();

  // Toggle checkbox selection for individual rows
  // const handleCheckboxChange = (value) => {
  //   setSelectedRadio((prev) => {
  //     if (prev.includes(value)) {
  //       // Remove if already selected
  //       return prev.filter((id) => id !== value);
  //     } else {
  //       // Add to selected
  //       return [...prev, value];
  //     }
  //   });
  // };

  // Handle "Check All" checkbox
  const handleCheckAllChange = () => {
    if (selectedRadio.length === data.length) {
      setSelectedRadio([]); // Deselect all if already selected
    } else {
      const allIds = data.map((item) => item.id);
      setSelectedRadio(allIds); // Select all
    }
  };



  const handleCheckboxChange = (value) => {
    if (radio) {
      setSelectedRadio([value]);
    } else {
      setSelectedRadio((prev) => {
        if (prev.includes(value)) {
          return prev.filter((id) => id !== value);
        } else {
          return [...prev, value];
        }
      });
    }
  };

  return (
    <TableContainer boxShadow={'md'} rounded={5} overflowX={"auto"} className="h-auto w-100 table-scroll"  bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
      <Table size="sm" variant="striped" colorScheme={colorMode === "light" ? "whiteScheme" : "darkPurple"}>
        <Thead >
          <Tr bg={colorMode === "light"? "#230A79" : "#312F35"}>
            {showRadioButton &&(
              <Th
                textAlign={"center"}
                p={4}
                whiteSpace="normal"
                wordBreak="normal"
                overflowWrap="normal"
                textTransform={"none"}
              >
                {radio? "Select":<Checkbox
                isChecked={selectedRadio?.length === data?.length}
                onChange={handleCheckAllChange}
                

              />}
              </Th>
            )}
            {tableHeadRow.map((heading, index) => (
              <Th
              color={"#fff"}
              fontWeight={400}
                textAlign={
                  tableHeadRow.length - 1 === index || centered
                    ? "left"
                    : "left"
                }
                key={index}
                p={4}
                
                whiteSpace="normal"
                wordBreak="normal"
                overflowWrap="normal"
                textTransform={"none"}
                fontSize={"15px"}
              >
                {isLoading ? <Skeleton height="20px" /> : heading}
              </Th>
            ))}
          </Tr>
        </Thead>
        <Tbody className="web-text-small">
          {isLoading
            ? Array.from({ length: TABLE_PAGINATION?.size }).map(
                (_, index) => (
                  <Tr 
                    bg={index % 2 === 0 ? "white" : "forestGreen.50"}
                    key={index}
                  >
                    {tableHeadRow.map((_, i) => (
                      <Td 
                        key={i}
                        style={{
                          whiteSpace: "nowrap",
                          textOverflow: "ellipsis",
                        }}
                        className="web-text-small"
                      >
                        <Skeleton height="20px" mb={1} mt={1} />
                      </Td>
                    ))}
                  </Tr>
                )
              )
            : data?.map((item, index) => (
                <Tr
                  cursor={"pointer"}
                  transition={"0.2s all"}
                  maxH={8}
                  bg={index % 2 === 0 ? "" : "forestGreen.50"}
                  key={index}
                >
                  {showRadioButton && (
                    <Td textAlign={"center"} >
                      {radio ? <Radio
                        bg={"#fff"}
                        
                        value={item.id}
                        isChecked={selectedRadio.includes(item.id)}
                        onChange={() => radioChange(item.id, item)}
                      />:<Checkbox
                        bg={"#fff"}
                        
                        value={item.id}
                        isChecked={selectedRadio.includes(item.id)}
                        onChange={() => handleCheckboxChange(item.id)}
                      />}
                    </Td>
                  )}
                  {tableHeadRow.map((heading, i) => (
                    <Td p={3}
                     color={colorMode === "light"? "#000000" : "#FFFFFF"}
                      textAlign={
                        tableHeadRow?.length - 1 === i || centered
                          ? "left"
                          : "left"
                      }
                      key={i}
                      fontWeight={colorMode === "light"? 500 : 400}
                      style={{
                        whiteSpace: "nowrap",
                        textOverflow: "ellipsis",
                      }}
                      className="web-text-small"
                    >
                      {item[heading]}
                    </Td>
                  ))}
                </Tr>
              ))}
        </Tbody>
      </Table>
    </TableContainer>
  );
};

export default NormalTable;