"use client";
import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
import { useWrStore } from "@/app/store";
import type { TableUpperProps } from "@/app/store/common/type/header";
import { rainPageSize, type rainChkZodType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
import { tableData } from "@/components/lib/func/commom";
import {
  chRowspanTable,
  rainChkTableData
} from "@/components/lib/func/TableData";
import LoadingOverlay from "@common/business_components/ui/loadingBar";
import UiPageNations from "@common/business_components/ui/table/uiPageNations";
import {
  Table,
  TableBody,
  TableHeader,
} from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
export default function RainChkgdTable({
  detailUp,
  handleClick = () => { },
  deleteData,
  rainChkData,
  pageNation,
  onPageChange,
  pageCount,
  readonly,
}: {
  detailUp: (data: rainChkZodType[]) => void;
  handleClick?: (data: any) => void;
  deleteData: (selectedIds: number[]) => void
  rainChkData?: rainChkZodType[];
  pageNation: number;
  onPageChange: (page: number) => void;
  pageCount: number;
  readonly: boolean;
}) {
  const { code, rainChkgdn, rainChkSttn, getRainSttnExcel } = useWrStore((state) => state);
  const [makeTableData, setMakeTableData] = useState<any[]>([]);
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const [upRaintDetail, setUpRaintDetail] = useState<rainChkZodType[]>([]);
  const [headList, setHeadList] = useState<{ headList: TableUpperProps[], upHeadList: chHeadType[] }>({ headList: [], upHeadList: [] });


  const toggleSelection = (pk: number, checked: boolean) => {
    setSelectedIds((prev) =>
      checked ? [...prev, pk] : prev.filter((item) => item !== pk)
    );
  };
  const handleChange = (
    rowIndex: number,
    field: keyof (typeof makeTableData)[0],
    value: string | number
  ) => {

    setMakeTableData((prev) =>
      prev.map((row, idx) => {
        return idx === rowIndex ? { ...row, [field]: value } : row
      }
      )
    );
  };

  const handleCellClick = useCallback((index: number, headId: string) => {
    if (
      headId === "totalSplyUswtrUtztnQnt" ||
      headId === "totalRuseFcltUtztnQnt"
    ) {

      handleClick(makeTableData[index])
    }

  }, [makeTableData, handleClick]);



  useEffect(() => {
    setSelectedIds([])// 셀렉트 초기화를 위한 작업
    if (rainChkData && rainChkData.length > 0) {
      const rainChg = rainChkData?.map((item: any) => {
        const bud = tableData([item.building], { code });
        const rainyDetails=  item.rainyDetails.map((detail)=>{
          return(
            {
              ...detail,
               // 일단 테이블에서 사용하기 위해 넘버 전환
              ph:  detail.ph&& !isNaN(detail.ph)?Number(detail.ph):detail.ph
            }
          )
        }) 
        return {
          ...item,
          ...bud[0],
          rainyDetails:rainyDetails,
          rowspan: item.rainyDetails?.length,
        };
      });

      console.log('rainChg ', rainChg)
      setMakeTableData(rainChkTableData(rainChg));
    } else {
      setMakeTableData([]);
    }
  }, [rainChkData, code]);

  useEffect(() => {
    //데이터를 평탄화 한것중에 체크박스 선택한 테이블만 선택

    //현황 페이지에서 필요한 엑셀 데이터를 바뀔때마다 넣기 위해서 
    getRainSttnExcel(makeTableData);
    const selectedData = makeTableData.filter((item) => selectedIds.includes(item.chkgdnSn));

    if (selectedData.length > 0) {
      const updateTableData = rainChkgdn.rainChk
        .map((rc) => {
          const newRainyDetail = rc.rainyDetails
            .map((rd) => {

              // 변경 데이터는 평탄화한 데이터 즉 루트에 변경되어 있음 이용용도까지 잇음 그걸로 찾기
              const findRain = selectedData.find(
                (sd) =>
                  rd.chkgdnSn === sd.chkgdnSn && rd.utztnUsgCd === sd.utztnUsgCd
              );

              if (findRain != undefined) {
                return {
                  ...rd,
                  // 조드 타입과 맞추기위해 스트링
                  ph: String(findRain.ph),
                  trbt: Number(findRain.trbt),
                  grssClfg: Number(findRain.grssClfg),
                  etc: findRain.etc,
                  vltnDt: findRain.vltnDt,
                  vltnMttr: findRain.vltnMttr,
                  levyAmt: Number(findRain.levyAmt),
                };
              } else {
                return undefined;
              }
            })
            .filter(Boolean);
          if (newRainyDetail[0] != undefined) {
            return {
              ...rc,
              rainyDetails: newRainyDetail,
            };
          } else {
            return undefined;
          }
        })
        .filter(Boolean);


      setUpRaintDetail(updateTableData as rainChkZodType[]);
    }
  }, [makeTableData, selectedIds]);

  useEffect(() => {
    detailUp(upRaintDetail);

  }, [upRaintDetail]);

  useEffect(() => {
    if (selectedIds.length > 0) {
      // 삭제를 위한 데이터 삽입
      deleteData(selectedIds)
    }
  }, [selectedIds])


  ///현황일 경우 input 비활성화 한다.
  useEffect(() => {
    if (rainChkSttn.isSttn) {

      setHeadList({
        headList: rainChkSttn.rainChkgdnHeadList,
        upHeadList: rainChkSttn.rainHeadNm
      })
    } else {
      setHeadList({
        headList: rainChkgdn.rainChkgdnHeadList,
        upHeadList: rainChkgdn.rainMainHeadNm
      })

    }
  }, [rainChkSttn.isSttn, rainChkgdn.rainChkgdnHeadList, rainChkSttn.rainChkgdnHeadList]);

  return (
    <>
      <LoadingOverlay isLoading={rainChkgdn.isLoading}></LoadingOverlay>
      <Table variant="secondary">
        <TableHeader className="font-bold">
          {headMakeprfmnc(
            headList?.headList,
            headList?.upHeadList
          )}
        </TableHeader>

        <TableBody>
          {chRowspanTable(
            makeTableData,
            headList.headList,
            handleChange,
            toggleSelection,
            selectedIds,
            handleCellClick,
            readonly
          )}
        </TableBody>
      </Table>
      <UiPageNations
        total={pageCount}
        cur={pageNation}
        pageSize={rainPageSize}
        onPageChange={onPageChange}
      />
    </>
  );
}