/**
 * 재이용실적등록 > 지도점검결과등록 - 연간대체수이용량, 연간중수도이용량 click시 상세 model의 table body
 */
"use client";
import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
import type { TableUpperProps } from "@/app/store/common/type/header";
import type {
} from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
import { InputTableBody } from "@/components/lib/func/TableData";
import {
  Table,
  TableBody,
  TableHeader,
} from "@common/components/ui";
import { useEffect, useState } from "react";

export function GuideDetailsTable({
  chgRes,
  headList,
  upheadList,
  setChGuidData,
  readonly
}: {
  chgRes: any[];
  headList: TableUpperProps[];
  upheadList: chHeadType[];
  type: string;
  setChGuidData: (chgRes: any[]) => void;
  readonly?: boolean;
}) {
  const [inputData, setInputData] = useState<any[]>();

  useEffect(() => {
    setInputData(chgRes);
  }, [chgRes]);

  useEffect(() => {
    setChGuidData(inputData ?? []);

  }, [inputData]);


  return (
    <>
      <div className={`card !m-[1.2rem] !p-0 `}>
        <Table variant="secondary" className="table-fixed">
          <colgroup>
            {headList
              .filter((head) => head.visible !== false)
              .map((head) => (
                <col
                  key={head.id}
                  style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined }}
                />
              ))}
          </colgroup>
          <TableHeader className="font-bold">{headMakeprfmnc(headList, upheadList)}</TableHeader>
          <TableBody >
            {InputTableBody(inputData ?? [], headList, setInputData, readonly)}
          </TableBody>
        </Table>
      </div>
    </>
  );
}