frontend/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/htdflSttn/page.tsx

"use client";

import { useWrStore } from "@/app/store";
import { btnClass } from "@/app/store/common/code";
import type {
  customRainBdst
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { htdflSttnSize } from "@/app/store/ruseFcltMng/fcltSttn/htdflSttn";
import {
  excelDownload,
  getCity,
  tableData
} from "@/components/lib/func/commom";
import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
import {
  ContentsDiv,
  SearchDiv,
  SearchFormLeft,
  SearchFormRight,
  SearchInput,
  SelectBox,
  Title,
  UiModal,
  UiTable,
  type SelectDataType
} from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
import { Button, Label } from "@common/components/ui";
import { useCallback, useEffect, useRef, useState } from "react";
import toast, { Toaster } from "react-hot-toast";
import { useTranslation } from "react-i18next";

export default function HtdflSttn() {
  const { code, htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore(
    (state) => state
  );
  const { htdflSttnRes, htdflSttnResCount } = htdflSttn;

  const isDownloadTriggered = useRef(false);
  const { t } = useTranslation('base');
  const [pageNation, setPageNation] = useState(1);
  const [isChHead, setIsChHead] = useState(false);
  const [resetPage, isResetPage] = useState(false);
  const [bdstTable, setBdstTable] = useState<customRainBdst[]>();
  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>()
  const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" });
  const [detailModal, setDetailModal] = useState<{
    isOpen: boolean;
    data: customRainBdst | undefined;
  }>({ data: undefined, isOpen: false });
  // const [bdstChgProps, setBdstChgProps] = useState<{
  //   isOpen: boolean;
  //   chBuilding: chgBuilding[];
  // }>({ isOpen: false, chBuilding: [] });
  const [fcltNm, setFcltNm] = useState<string>("");

  useEffect(() => {
    htdflSttnSearch(false, pageNation, htdflSttnSize, String(getConValue()), fcltNm, code.cityCd, code.sggCd);
    isResetPage(false)
  }, [pageNation]);

  const getSelCity = (val: string | number) => {
    const cityValue = String(val);

    if (cityValue === "0") {
      setSelectSgg([]);
      setObjSearch({ city: cityValue, sgg: "" });
    } else {
      const data = getCity(cityValue, code.sggCd);
      setSelectSgg(data);

      const firstSggVal = data.find(item => item.val === "0")?.val || (data[0]?.val ?? "");
      setObjSearch({ city: cityValue, sgg: firstSggVal });
    }
  };

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

  const getConValue = () => {
    if (!objSearch.city || objSearch.city === "0") {
      return "0";
    }
    if (objSearch.sgg && objSearch.sgg !== "0") {
      return objSearch.sgg;
    }
    return objSearch.city;
  };

  const cellClick = (index: number | undefined, headId: string) => {
    if (
      headId !== "chBuildingYn" &&
      index !== undefined &&
      bdstTable !== undefined
    ) {
      setDetailModal({ isOpen: true, data: bdstTable[index] });
    }
  };

  const excelClick = useCallback(() => {
    isDownloadTriggered.current = true;
    htdflSttnSearch(true, 1, htdflSttnResCount, String(getConValue()), fcltNm, code.cityCd, code.sggCd);
  }, [htdflSttnSearch, objSearch, code.cityCd, code.sggCd, fcltNm, htdflSttnResCount]);

  useEffect(() => {
    if (!isDownloadTriggered.current) {
      return;
    }
    if (htdflSttn.excelList.length > 0) {
      excelDownload(
        htdflSttn.excelList,
        "온배수시설 현황",
        "sample_htdflSttn.xlsx",
        "A1:R3"
      );
    } else {
      toast.error(t('excelDownErrMsg'));
    }
    isDownloadTriggered.current = false;
  }, [htdflSttn.excelList, code]);

  useEffect(() => {
    if (!htdflSttn.isInit) {
      initHtdfl(false, 1, htdflSttnSize, "0", fcltNm, code.cityCd, code.sggCd);
    }
  }, [htdflSttn.isInit, initHtdfl]);

  useEffect(() => {
    const data = tableData(htdflSttnRes, { code });
    const chData = data
      .map((item: any) => ({
        ...item,
        ...item.reuseBuilding[0],
        ...item.reuseBuilding[0].htdflObj,
        chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
      }))
      .filter((item: any) => item.htdflObj !== undefined);
    setBdstTable(chData);
  }, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]);

  return (
    <>
      <ContentsDiv>
        <div className="grid grid-cols-4 gap-4 ">
          <div className="col-span-4">
            <Title title={"온배수 시설 현황"} />

            <SearchDiv>
              <SearchFormLeft>
                <div className="col-span-10 flex flex-row">
                  <SelectBox
                    className="col-span-2 w-1/6 h-full text-2xl"
                    label="시도"
                    selectClass={""}
                    selectArray={code.cityCd}
                    onSelectValue={getSelCity}
                  />
                  <SelectBox
                    className="col-span-2 w-1/6 h-full text-2xl ml-4"
                    label="시군구"
                    selectClass={""}
                    selectArray={selectSgg || []}
                    value={objSearch.sgg} // value props 추가
                    onSelectValue={getSgg}
                  />
                  <div className="col-span-2 flex flex-row space-x-2 ml-3 mt-2">
                    <Label className="w-28 mt-2 text-xl">
                      {"시설명"}
                    </Label>
                    <SearchInput
                      className={"w-full h-full text-2xl"}
                      label={""}
                      textValue={fcltNm || ""}
                      setText={setFcltNm}
                    />
                  </div>
                </div>
              </SearchFormLeft>
              <SearchFormRight
                className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
                <div className="flex flex-row space-x-2 items-center">
                  <Button
                    size={"sm"}
                    onClick={() => {
                      htdflSttnSearch(false, 1,htdflSttnSize, String(getConValue()), fcltNm, code.cityCd, code.sggCd);
                      isResetPage(true)
                    }}
                  >
                    조회
                  </Button>
                  <Button
                    size={"sm"}
                    className={`${btnClass} green`}
                    onClick={excelClick}
                  >
                    다운로드
                  </Button>
                  <Button
                    size={"sm"}
                    className={btnClass}
                    onClick={() => {
                      setIsChHead(true);
                    }}
                  >
                    조회항목설정
                  </Button>
                </div>
              </SearchFormRight>
            </SearchDiv>
          </div>
        </div>
        <div className="grid grid-cols-6 gap-4 ">
          <div className="col-span-6">
            <ListDiv>
              <UiTable
                headName={undefined}
                tableData={bdstTable || []}
                headlist={htdflSttn.htdflSttHeadList}
                pageSize={htdflSttnSize}
                total={htdflSttnResCount || 0}
                cellClick={(index: number | undefined, headId: string) => {
                  cellClick(index ?? undefined, headId);
                }}
                onPageChange={setPageNation}
                resetPageNo={resetPage}
              >
                <HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
              </UiTable>
            </ListDiv>
          </div>
        </div>
        <UiModal
          open={isChHead}
          onOpenChange={() => {
            setIsChHead(!isChHead);
          }}
          bodyClass={""}
          body={
            <HeadChModal
              type={"HTB"}
              headList={htdflSttn.htdflSttHeadList.map((item) => ({
                ...item,
                visible: item.visible ?? false,
              }))}
            />
          }
        />
        <UiModal
          open={detailModal.isOpen}
          onOpenChange={() => {
            setDetailModal({ ...detailModal, isOpen: !detailModal.isOpen });
          }}
          bodyClass={"w-[40vw] max-w-none max-h-[calc(100%-70px)]"}
          body={<SttnDetailModal type={"HTB"} formObj={detailModal.data} />}
        />
      </ContentsDiv>
      <Toaster position="top-center" />
    </>
  );
}