frontend/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx

"use client";
import { useWrStore } from "@/app/store";
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
import {
  selectClass,
  type customRainBdst,
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
import { tableData } from "@/components/lib/func/commom";
import HtdflRegForm from "@/components/ui/form/fcltReg/htdflReg/htdflRegForm";
import RainRegForm from "@/components/ui/form/fcltReg/rainReg/rainRegForm";
import RswtrRegForm from "@/components/ui/form/fcltReg/rswtrReg/rswtrRegForm";
import {
  ScrollArea,
  SelectBox,
  UiTable,
  type SelectDataType,
} from "@common/business_components";
import { Button, Input, Label } from "@common/components";
import { useEffect, useState } from "react";

export type objSearchType = {
  sgg: string | number;
  city: string | number;
};
//RNB(빗물), RST(중수도), HTB(온배수)
type MoType = "RNB" | "RST" | "HTB"; // 여기에 'htdf' 추가

type BdstTypeMap = {
  RNB: customRainBdst;
  RST: customRswtBdst;
  HTB: customRswtBdst; // 해야해// 아직 아노딤
};

interface BdstRegProps<T extends MoType> {
  moType: T;
  isModal: boolean;
  setIsModal?: (open: boolean) => void;
}

export function BdstReg<T extends MoType>({
  moType,
  setIsModal,
  isModal,
}: BdstRegProps<T>) {
  const { code, bdst, findBdst } = useWrStore((state) => {
    return state;
  });

  const { userSiSggCd } = code;

  const [bdstTable, setBdstTable] = useState<BdstTypeMap[T][]>();
  const [bdstForm, setBdstForm] = useState<BdstTypeMap[T]>(
    {} as BdstTypeMap[T]
  );
  const [searchTxt, setSearchTxt] = useState<string>();
  const [objSearch, setObjSearch] = useState<objSearchType>({
    sgg: "",
    city: "",
  });
  const [useCityCd, setUserCityCd] = useState<SelectDataType[]>([]);
  const [useSggCd, setUserSggCd] = useState<SelectDataType[]>([]);

  const searchBdst = (searchTxt: string | undefined) => {
    let data = objSearch.city;

    if (objSearch.sgg !== "" && objSearch.sgg !== "0") {
      data = objSearch.sgg;
    }
    //RNB(빗물), RST(중수도), HTB(온배수)
    findBdst(String(data), searchTxt || "", moType);
  };

  useEffect(() => {
    if (code.sggCd.length > 0) {
      const bdstData = bdst.bdstBase.map((bdst) => {
        const archArea =
          bdst?.archArea.split(".")[0] !== "-1"
            ? bdst?.archArea.split(".")[0]
            : "확인불가";
        return {
          ...bdst,
          archArea: archArea,
        };
      });
      setBdstTable(tableData(bdstData, { code }));
    }
  }, [bdst]);

  useEffect(() => {
    if (userSiSggCd.length === 2 && code.cityCd.length > 0) {
      const city = code.cityCd.filter((item) => item.val === userSiSggCd);
      const sgg = code.sggCd.filter(
        (item) => item.val.slice(0, 2) === userSiSggCd
      );
      sgg.unshift({ text: "전체", val: "0" });
      setUserCityCd(city); // Fix: Ensure city is of type SelectDataType[]
      setObjSearch({ ...objSearch, city: String(city[0]?.val) });
      setUserSggCd(sgg);
    } else if (
      userSiSggCd.length === 5 &&
      code.cityCd.length > 0 &&
      code.sggCd.length > 0
    ) {
      const city = code.cityCd.filter(
        (item) => item.val === userSiSggCd.slice(0, 2)
      );
      setUserCityCd(city);
      const sgg = code.sggCd.filter((item) => item.val === userSiSggCd);
      setUserSggCd(sgg);
      setObjSearch({ city: String(city[0]?.val), sgg: String(sgg[0]?.val) });
    }
  }, [userSiSggCd, code.cityCd, code.sggCd]);

  const tableClick: (val: number | undefined, headId: string) => void = (
    val
  ) => {
    if (val !== undefined && bdst?.bdstBase.length > 0) {
      const data: BdstTypeMap[T] = bdst?.bdstBase[val];
      if (data) {
        setBdstForm(data);
      }
    }
  };

  useEffect(() => {
    setBdstTable([]); // 초기화 작업
  }, []);
  return (
    <>
      <div className="grid grid-cols-12 gap-4 mt-4 items-center">
        <SelectBox
          className="col-span-3 h-full"
          label={"시도"}
          selectClass={selectClass}
          selectArray={useCityCd}
          onSelectValue={(val) => {
            setObjSearch({ ...objSearch, city: String(val) });
          }}
          value={objSearch.city || useCityCd[0]?.val}
        ></SelectBox>
        <SelectBox
          className="col-span-3 h-full"
          label={"시군구"}
          selectClass={selectClass}
          selectArray={useSggCd || []}
          onSelectValue={(val) => {
            if (val) setObjSearch({ ...objSearch, sgg: String(val) });
          }}
          value={objSearch.sgg || useSggCd[0]?.val}
        >
          {" "}
        </SelectBox>
        <Label className="w-full text-xl text-gray-600 text-right">
          시설명
        </Label>
        <Input
          className="w-full h-full !text-xl col-span-2 col-start-8"
          type="text"
          value={searchTxt || ""}
          onChange={(e) => setSearchTxt(e.target.value)}
        />
        <Button
          className=""
          size={"sm"}
          onClick={() => {
            searchBdst(searchTxt);
          }}
        >
          조회
        </Button>
      </div>
      <div className="border-t border-gray-300 my-4"></div>
      <div className="h-auto">
        <h1 className="text-2xl font-medium text-label pl-8">
          건축물 목록
          <span className="!text-2xl text-base  text-blue-500">
            (유의 사항: 신규등록하려는 건축물이 목록에 없을 경우 하단 건축물
            정보에 추가하여 주시기 바랍니다.)
          </span>
        </h1>
        <ScrollArea className="h-[30vh]">
          <div>
            <UiTable
              tableData={bdstTable || []}
              headlist={bdst.moUpHeadList}
              pageSize={-10}
              total={-1}
              headName={undefined}
              cellClick={(idx, headId) => tableClick(idx, headId || "")}
              onPageChange={function (page: number): void {
                console.log("page ", page);
                throw new Error("Function not implemented.");
              }}
            ></UiTable>
          </div>
        </ScrollArea>
        <div className="border-t border-gray-300 my-4"></div>
        <ScrollArea className="h-[40vh]">
        <div>
          {moType === "RNB" ? (
            <RainRegForm
              rainForm={bdstForm as customRainBdst}
              isModal={isModal}
              setIsModal={setIsModal}
            />
          ) : moType === "RST" ? (
            <RswtrRegForm
              rswtForm={bdstForm as customRswtBdst}
              isModal={isModal}
              setIsModal={(open?: boolean) => {
                if (setIsModal && open) {
                  setIsModal(open);
                }
              }}
            ></RswtrRegForm>
          ) : (
            <HtdflRegForm
              htdflForm={bdstForm as unknown as customHtdflBdst}
              isModal={true}
              setIsModal={(open?: boolean) => {
                if (setIsModal && open) {
                  setIsModal(open);
                }
              }}
            ></HtdflRegForm>
          )}
        </div>
        </ScrollArea>
      </div>
    </>
  );
}