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

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

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;
}

export function BdstReg<T extends MoType>({ moType }: BdstRegProps<T>) {
  const { rain, code, bdst,findBdst } = useWrStore((state) => {
    return state;
  });
  const [bdstTable, setbdstTable] = useState<BdstTypeMap[T][]>();
  const [rainBdstForm, setRainBdstForm] = useState<BdstTypeMap[T]>({} as BdstTypeMap[T]);
  const [searchTxt, setSearchTxt] = useState<string>()
  const [selectSgg, setSelectSgg] = useState<selectArray[] | []>()
  const [objSearch, setObjSearch] = useState<objSearchType>({sgg:"",city:""});

  const getSelCity = (val: string | number) => {
      const cityValue = String(val); // Ensure val is treated as a string
      const data = getCity(cityValue, code.sggCd);
      setSelectSgg(data);
  
      setObjSearch({ city: cityValue, sgg: '' });
  };

  const getSgg = (val: string | number) => {
    console.log(val);
    setObjSearch({...objSearch,sgg: String(val)})
  };

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

    data =  String(code.cityCd[0]?.val)
  }
  if(objSearch.sgg !=="" ){
    data = objSearch.sgg
  }

  //RNB(빗물), RST(중수도), HTB(온배수)
  findBdst(String(data), searchTxt || "",moType )

 }

  useEffect(() => {
    if (code.sggCd.length > 0) {
       
         setbdstTable( tableData(bdst.bdstBase, { code }));
       }
  }, [ bdst]);


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

     
      }

  } 

  useEffect(()=>{
    setbdstTable([]) // 초기화 작업
  },[])
  const nodeList = headMakeColSpan(bdst.moUpHeadList);
  return (
    <>
      <div className="grid grid-cols-12 gap-4 mt-4">
        <SelectBox
          className="col-span-3 "
          label={"시도"}
          selectClass={selectClass}
          selectArray={code.cityCd || []}
          onSelectValue={getSelCity}
        >
          {""}
        </SelectBox>
        <SelectBox
          className="col-span-3"
          label={"시군구"}
          selectClass={selectClass}
          selectArray={selectSgg || []}
          onSelectValue={getSgg}
        >
          {" "}
        </SelectBox>
        <Label className="w-20 text-base text-gray-600 mt-4 text-right">건축물명</Label>
        <Input   className="w-full h-full text-2xl col-span-2 col-start-8" type="text"  value={searchTxt || ''} onChange={(e) =>   setSearchTxt(e.target.value)}/> 
 
        <Button className="rounded-lg" onClick={()=>{searchBdst(searchTxt)}}>조회</Button>
      </div>
      <div className="border-t border-gray-300 my-4"></div>
      <div className="h-auto">
      <ScrollArea className="h-[20vh]">
          <div>
            <UiTable
              tableData={bdstTable || []}
              headlist={bdst.moUpHeadList}
              pageSize={-10}
              total={-1}
              headName={undefined}
              cellClick={(idx,headId)=> (tableClick(idx, headId||"" ))}
            >
              {nodeList}
            </UiTable>
          </div>
          </ScrollArea>
        <div className="border-t border-gray-300 my-4"></div>
        <ScrollArea className="h-[60vh]">
          <div>
            { moType === 'RNB'?
              <RainRegForm rainForm={rainBdstForm as customRainBdst} isModal={true} />
            :moType==='RST' 
              ? <RswtrRegForm rswtForm={rainBdstForm as customRswtBdst} isModal={true}></RswtrRegForm>
                            :<HtdflRegForm htdflForm={rainBdstForm as  customHtdflBdst} isModal={true}></HtdflRegForm>
            }
              
          </div>
        </ScrollArea>
      </div>
    </>
  );
}