frontend/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx

import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
import type { TableUpperProps } from "@/app/store/common/type/header";
import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";

import {
  DatePicker,
  SelectBox,
  type SelectDataType,
} from "@common/business_components/ui";
import {
  Checkbox,
  Input,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@common/components/ui";
import React, { useEffect, useState } from "react";

type RuseMngTableProps = {
  tableData: any[];
  headList: TableUpperProps[];
  upHeadList: chHeadType[];
  code?: { name: string; val: SelectDataType[] }[];
  onTableSet?: (item: any) => void;
  indexMng?: number;
  indexBiz?: number;
};

const RuseMngTable = React.forwardRef<any, RuseMngTableProps>(
  (
    { tableData, headList, upHeadList, code, onTableSet, indexMng, indexBiz },
    ref
  ) => {


    const [tableState, setTableState] = useState([...tableData]);
    useEffect(() => {
      if (ref && typeof ref === "object" && "current" in ref) {
        ref.current = tableState;
      }

      if (onTableSet) onTableSet(tableState);
    }, [tableState, onTableSet]);

    useEffect(() => {
      if (tableData) setTableState(tableData);
    }, [tableData]);
    return (
      <>
        <Table key={`table-${indexMng}-${indexBiz}`} variant="secondary">
          <TableHeader className="font-bold">
            {upHeadList ? (
              headMakeprfmnc(headList, upHeadList)
            ) : (
              <TableRow key={"table-row-test"}>
                {headList.map((head) => (
                  <TableHead
                    key={"table-head-row " + head.id}
                    className={`border border-gray-600 px-2 py-1 `}
                  >
                    {head.title}
                  </TableHead>
                ))}
              </TableRow>
            )}
          </TableHeader>

          <TableBody>
            {tableState.map((item, i) => (
              <TableRow key={i}>
                {headList.map((head, j) => (
                  <TableCell
                    key={`${head.id}-${j}`}
                    className="text-center whitespace-nowrap"
                    onClick={() => {}}
                  >
                    {head.edit === true ? (
                      <Input
                        className={`${head.type === "number" ? "text-right" : "text-center"} !text-xl`}
                        type={head.type}
                        onChange={(txt) => {
                          setTableState((prev) => {
                            const next = [...prev];
                            next[i] = {
                              ...next[i],
                              [head.id]: txt.target.value,
                            };
                            return next;
                          });
                        }}
                        value={
                          head.type === "number"
                            ? Number(tableState[i][head.id]) || 0
                            : tableState[i][head.id] || ""
                        }
                      />
                    ) : head.type === "select" ? (
                      <SelectBox
                        label=""
                        selectArray={
                          code?.find((item) => item.name === head.selectData)
                            ?.val ?? []
                        }
                        value={tableState[i][head.id] || ""}
                        className={""}
                        selectClass={selectClass}
                        onSelectValue={(val) => {
                          setTableState((prev) => {
                            prev[i][head.id] = val;
                            return [...prev];
                          });
                        }}
                      ></SelectBox>
                    ) : head.type === "date" ? (
                      <DatePicker
                        mode="single"
                        field={{
                          value: tableState[i][head.id], // Provide a default Date value
                          onChange: (date) => {
                            setTableState((prev) => {
                              const next = [...prev];
                              next[i] = { ...next[i], [head.id]: date };
                              return next;
                            });
                          },
                        }}
                        selectClass={"w-full"}
                      />
                    ) : head.type === "checkbox" ? (
                      <Checkbox
                        className=""
                        checked={!!tableState[i][head.id]}
                        onCheckedChange={(checked) => {
                          console.log("checked", checked);
                          setTableState((prev) => {
                            prev[i][head.id] = checked;
                            return [...prev];
                          });
                        }}
                      ></Checkbox>
                    ) : (
                      `${item[head.id] || ""}`
                    )}
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </>
    );
  }
);
RuseMngTable.displayName = "RuseMngTable";

export default RuseMngTable;