frontend/apps/wr/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal.tsx

"use client";
import { useWrStore } from "@/app/store";
import type { CommonTableProps } from "@/app/store/common/type/header";
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
import { rainChkTableData } from "@/components/lib/func/TableData";
import { ScrollArea, Title, UiTable } from "@common/business_components/ui";
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
import { useEffect, useState } from "react";
import HtdflRegForm from "../../../form/fcltReg/htdflReg/htdflRegForm";
import RainRegForm from "../../../form/fcltReg/rainReg/rainRegForm";
import RswtrRegForm from "../../../form/fcltReg/rswtrReg/rswtrRegForm";

export default function SttnDetailModal({
  type,
  formObj,
  isMap ,
}: {
  type: string;
  formObj: any;
  isMap?: boolean;
}) {
  const { rainSttn, rswtSttn, rainSttnChkSearch } = useWrStore(
    (state) => state
  );
  const [detailData, setDetailData] = useState({
    head: [] as CommonTableProps[],
    node: [] as CommonTableProps[],
    data: {} as any,
  });

  useEffect(() => {
    if (type === "RNB" && formObj?.reuseBuilding[0]) {
      rainSttnChkSearch(formObj.reuseBuilding[0].bdstRuseFcltSn);
    } else if (type === "RST") {
      //  rswtChkPolAndGuide(formObj.reuseBuilding[0].bdstRuseFcltSn)
    }
  }, [type, formObj]);

  useEffect(() => {
    if (
      type === "RNB" &&
      formObj?.reuseBuilding[0] &&
      rainSttn.rainChkRes?.bdstRuseFcltSn
    ) {
      const tableTotalData = rainChkTableData([rainSttn.rainChkRes]);
      const data = tableTotalData.map((item) => {
        const obj = {
          totalSplyUswtrUtztnQnt: item.totalSplyUswtrUtztnQnt,
          totalRuseFcltUtztnQnt: item.totalRuseFcltUtztnQnt,
          ph: item.ph,
          trbt: item.trbt,
          grssClfg: item.grssClfg,
          etc: item.etc,
          vltnDt: item.vltnDt,
          vltnMttr: item.vltnMttr,
          levyAmt: item.levyAmt,
        };
        return obj;
      });
      setDetailData({
        head: rainSttn.rainSttnDetailHeadList,
        node: rainSttn.rainSttnDetailNodeList,
        data: data,
      });
    } else if (type === "RST" && rswtSttn.rswtSttnRes) {
      // const tableTotalData = rswtChkTableData(rswtSttn.rswtSttnRes as unknown as rswtChkZodType[]);
      //   setDetailData({
      //     head: rswtSttn.rswtSttHeadList,
      //     node:rswtSttn.rswtSttNodeList,
      // //    data: tableTotalData,
      //   });
    }
  }, [rainSttn.rainChkRes]);

  useEffect(() => {
    setDetailData({ data: [], head: [], node: [] });
  }, []);

  return (
    <div>
      <Title
        title={
          type === "RNB"
            ? "빗물이용시설 상세정보"
            : type === "RST"
              ? "중수도시설 상세정보"
              : "온배수시설 상세정보"
        }
      ></Title>
      <ScrollArea
        className={isMap ?"h-[100vh]":
           detailData.data.length > 0
              ? "h-[80vh]"
              : "h-[70vh]"
        }
      >
        {type === "RNB" ? (
          <RainRegForm
            rainForm={formObj as customRainBdst}
            isModal={false}
            readonly={true}
            isMap={isMap}
          />
        ) : type === "RST" ? (
          <RswtrRegForm
            rswtForm={formObj as customRswtBdst}
            isModal={false}
            readonly={true}
            isMap={isMap}
          />
        ) : (
          <HtdflRegForm
            htdflForm={formObj as customHtdflBdst}
            isModal={false}
            readonly={true}
            isMap={isMap}
          />
        )}

        {detailData.data.length > 0 ? (
          <UiTable
            headName={
              type === "RNB"
                ? "빗물이용시설 상세정보"
                : type === "RST"
                  ? "중수도시설 상세정보"
                  : "온배수시설 상세정보"
            }
            tableData={detailData.data || []}
            headlist={detailData.head || []}
            pageSize={0}
            total={0}
            cellClick={undefined}
            onPageChange={function (page: number): void {
              console.log("page ", page);
              throw new Error("Function not implemented.");
            }}
          >
            <HeadMakeColSpan upHeadList={detailData.node} />
          </UiTable>
        ) : (
          <></>
        )}
      </ScrollArea>
    </div>
  );
}