"use client";
import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
import { useWrStore } from "@/app/store";
import type {
} from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import {
  Input,
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableRow,
} from "@common/components/ui";
import {  useEffect, useState } from "react";

export function GuideDetailsTable({
  chgRes,
  headList,
  type,
  setChGuidData,
}: {
  chgRes: any[];
  headList: TableUpperProps[]; 
  type: string;
  setChGuidData: (chgRes: any[]) => void;
}) {
  const { code, rainChkgdn } = useWrStore((state) => state);
  const [guidData, setGuidData] = useState<any[]>();


  const handleChange = (
    rowIndex: number,
    field: any,
    value: string | number
  ) => {
    if(Number(value) < 0  ||! Number(value)){
        value = 0;
    }else{
      value = Number(value);
    }
      setGuidData((prevData) =>
        prevData?.map((row, index) => {
          if (index === rowIndex) {
            return {
              ...row,
              [field as any]: value,
            };
          }
          return row;
        })
      );
  };
  const tableBody = (chgRes: any[] | []) => {
    return (
      <>
        {chgRes.map((data, dataIndex) => (
          <TableRow key={dataIndex + "row"}>
            {headList.map((head, headIndex) => (
              <TableCell key={head.id + headIndex} className="w-36" >
                {head.edit ===true && data.edit !==false?
                <Input
                  className={`${head.id !== "utztnUsgCd" ? "text-right" : "text-center"} !text-xl h-10 w-full`}
                  onChange={(e) =>
                    handleChange(dataIndex, head.id, e.target.value)
                  }
                  value={data[head.id as keyof any] ?? ""}
                /> : (
                  <div
                    className={`
                      ${head.id !== "utztnUsgCd" ? "text-right" : "text-center"} 
                      !text-xl w-full h-10 
                    `}
                  >
                    {data[head.id as keyof any] ?? ""}
                  </div>
                )
                }
              </TableCell>
            ))}
          </TableRow>
        ))}
      </>
    );
  };
  useEffect(() => {
    setGuidData(chgRes);
  }, [chgRes]);


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

  }, [guidData]);

  return (
    <>
  <div className={`card !m-[1.2rem] !p-0r `}> 
      <Table variant="secondary">
        <TableHeader className="font-bold">{headMakeprfmnc(headList, rainChkgdn?.rainHeadNm)}</TableHeader>
        <TableBody >
         {tableBody(guidData ?? [])}
        </TableBody>
      </Table>
  </div>
    </>
  );
}