Untitled

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
import styles from "./QuoteBuilderCollapsibleTable.module.css";
import { putThousandSeparator } from "../../../utils/methods";
import "./QuoteBuilderCollapsibleTable.css";
import { useDispatch } from "react-redux";

const QuoteBuilderCollapsibleTable = ({
  columns,
  data,
  viewType,
  showAvgCost = false,
  handleChangeInput,
}) => {
  const [collapseData, setCollapseData] = useState([]);
  const dispatch = useDispatch();

  const toggleCollapse = (id) => {
    setCollapseData((prev) =>
      prev.includes(id) ? prev.filter((index) => index !== id) : [...prev, id]
    );
  };

  const formatIndex = (index) => String(index + 1).padStart(2, "0");

  const getTransformValue = (value, transform) => {
    if (transform && value) {
      return transform(value);
    }
    return value;
  };

  // Render table headers for grouped inputs
  const renderGroupedHeaders = () => {
    const groupedFields = columns.find(col => col.accessorKey === "groupedInputs")?.groupedFields || [];
    return groupedFields.map((field, index) => (
      !field.hide && (
        <th key={index} className={field.className}>
          {field.header}
        </th>
      )
    ));
  };

  // Render table cell content
  const renderCellContent = (item, column, rowIndex) => {
    const { accessorKey, transform, editable, percentage } = column;
    
    if (editable) {
      return (
        <input
          className="editable-input"
          type="text"
          value={getTransformValue(item[accessorKey], transform)}
          onChange={(e) => handleChangeInput(e.target.value, rowIndex, accessorKey)}
        />
      );
    }

    const value = getTransformValue(item[accessorKey], transform);
    return percentage ? `${value}%` : value;
  };

  // Render grouped input cells
  const renderGroupedCells = (item, rowIndex) => {
    const groupedFields = columns.find(col => col.accessorKey === "groupedInputs")?.groupedFields || [];
    return groupedFields.map((field, index) => 
      !field.hide && (
        <td key={index} className={field.className}>
          {renderCellContent(item, field, rowIndex)}
        </td>
      )
    );
  };

  return (
    <div className="container-sm mt-4 overflow-auto">
      <table className="table text-end custom-tbody-border">
        <thead>
          <tr>
            {/* Option column header */}
            <th className="text-start">Option</th>
            {/* Render grouped input headers */}
            {renderGroupedHeaders()}
            {/* Additional columns */}
            {columns
              .filter(col => col.accessorKey !== "groupedInputs" && col.accessorKey !== "index")
              .map((col, index) => (
                !col.hide && (
                  <th key={index} className={col.className}>
                    {col.header}
                  </th>
                )
              ))}
          </tr>
        </thead>
        <tbody>
          {data.map((item, rowIndex) => (
            <tr key={rowIndex}>
              {/* Option column with collapse toggle */}
              <td className="text-start" onClick={() => toggleCollapse(rowIndex)}>
                <span className={styles["collapse-div"]}>
                  <span className={styles["option-div"]}>
                    <input
                      type="checkbox"
                      className={styles["option-input"]}
                      checked={item.isChecked || false}
                    />
                    {formatIndex(rowIndex)}
                  </span>
                  <span className={`${styles["cursor-pointer"]} m-1`}>
                    <FontAwesomeIcon 
                      icon={collapseData?.includes(rowIndex) ? faChevronUp : faChevronDown} 
                    />
                  </span>
                </span>
              </td>
              {/* Render grouped input cells */}
              {renderGroupedCells(item, rowIndex)}
              {/* Additional columns */}
              {columns
                .filter(col => col.accessorKey !== "groupedInputs" && col.accessorKey !== "index")
                .map((col, index) => (
                  !col.hide && (
                    <td 
                      key={index} 
                      className={col.className === "text-color-green" ? styles[col.className] : col.className}
                    >
                      {renderCellContent(item, col, rowIndex)}
                    </td>
                  )
                ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default QuoteBuilderCollapsibleTable;