Untitled

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

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 getTransformValue = (value, transform) => {
    if (transform) {
      return transform(value);
    }
    return value;
  };

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

  const getAccessorValue = (item, accessorKey) => {
    return item[accessorKey];
  };

  return (
    <div className="container-sm mt-4 overflow-auto">
      <table className="table text-end custom-tbody-border">
        <thead>
          <tr>
            {columns.map(
              (
                { header, className, hide = false, showCheckBox = false },
                index
              ) =>
                !hide && (
                  <th key={index} className={className}>
                    {header}
                  </th>
                )
            )}
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <React.Fragment key={index}>
              <tr>
                {columns
                  .filter(({ accessorKey }) => accessorKey !== "groupedInputs") // Exclude the grouped key
                  .map(
                    (
                      {
                        accessorKey,
                        expandable,
                        transform,
                        className,
                        header,
                        hide = false,
                        editable = false,
                        percentage = false,
                        isChecked = false,
                        groupedFields = [],
                      },
                      cIndex
                    ) =>
                      expandable ? (
                        <td
                          key={cIndex}
                          className={className}
                          onClick={() => toggleCollapse(index)}
                        >
                          <span className={`${styles["collapse-div"]}`}>
                            <span className={`${styles["option-div"]}`}>
                              <input
                                type={"checkbox"}
                                className={`${styles["option-input"]}`}
                                checked={isChecked}
                              />
                              {accessorKey === "index"
                                ? formatIndex(index)
                                : item[accessorKey]}
                            </span>
                            <span className={`${styles["cursor-pointer"]} m-1`}>
                              {collapseData?.includes(index) ? (
                                <FontAwesomeIcon icon={faChevronUp} />
                              ) : (
                                <FontAwesomeIcon icon={faChevronDown} />
                              )}
                            </span>
                          </span>
                        </td>
                      ) : (
                        !hide && (
                          <td
                            key={cIndex}
                            className={
                              className === "text-color-green"
                                ? styles[className]
                                : className
                            }
                          >
                            {/* 
: accessorKey == "groupedInputs" ? (
                        // Render grouped inputs in one <td>
                        <td key={cIndex} className="">
                          <div className="">
                          {console.log('group',groupedFields)}
                            {groupedFields?.map((key) => (
                              <input
                                key={key}
                                className="editable-input"
                                type="text"
                                value={getTransformValue(
                                  getAccessorValue(item, key),
                                  transform
                                )}
                                onChange={(e) =>
                                  handleChangeInput(e.target.value, index, key)
                                }
                              />
                            ))}
                          </div>
                        </td> */}

                            {editable && accessorKey == "groupedInputs" ? (
                              <td key={cIndex} className="">
                                <div className="">
                                  {console.log("group", groupedFields)}
                                  {groupedFields?.map((key) => (
                                    <input
                                      key={key}
                                      className="editable-input"
                                      type="text"
                                      value={getTransformValue(
                                        getAccessorValue(item, key),
                                        transform
                                      )}
                                      onChange={(e) =>
                                        handleChangeInput(
                                          e.target.value,
                                          index,
                                          key
                                        )
                                      }
                                    />
                                  ))}
                                </div>
                              </td>
                            ) : (
                              getTransformValue(
                                getAccessorValue(item, accessorKey),
                                transform
                              )
                            )}
                          </td>
                        )
                      )
                  )}
              </tr>
            </React.Fragment>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default QuoteBuilderCollapsibleTable;