frontend/apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx

/**
 * map 시설물 layer > 하수재이용시설 modal
 */
import { useWrStore } from "@/app/store";
import { btnClass } from "@/app/store/common/code";
import { ruseMapSize } from "@/app/store/map/ruseMap";
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
import { excelDownload, yearOptions } from "@/components/lib/func/common";
import {
  ContentsDiv,
  SearchBaseForm,
  SearchInput,
  SelectBox,
  Title,
  UiTable,
  type ReturnType,
} from "@common/business_components/ui";
import { Label } from "@common/components/ui";
import { useEffect, useRef, useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";

export function RuseFacility({
  rtnFeature,
}: {
  rtnFeature: (feature: any) => void;
}) {
  const { code, ruseMap, ruseMapInit, getMapFlcts, ruseMapSearch } = useWrStore(
    (state) => state
  );
  const { t } = useTranslation("base");

  const { ruseMapCount, ruseExcelList, fclts, ruseMapRes, ruseMapHeadList } =
    ruseMap;

  const [ruseTable, setRuseTable] = useState<WaterReuseFacility[]>();
  const [isReset, setIsReset] = useState(false);
  const ref = useRef<ReturnType>({} as ReturnType);
  const [searchYear, setSearchYear] = useState<string>(
    String(new Date().getFullYear())
  );
  const [pbnRuseNm, setPbnRuseNm] = useState<string>("");

  const ruseCellClick = (index: number | undefined) => {
    if (index !== undefined && ruseTable !== undefined) {
      rtnFeature(ruseTable[index]);
    }
  };
  useEffect(() => {
    if (!ruseMap.isInit) {
      getMapFlcts();
    }
  }, [ruseMap.isInit]);
  useEffect(() => {
    ruseMapInit(1, ruseMapSize, ref.current, searchYear, fclts);
  }, [fclts]);

  useEffect(() => {
    if (ruseExcelList && ruseExcelList.length > 0) {
      if (ruseExcelList.length > 0) {
        excelDownload(
          ruseExcelList,
          "하수재이용시설 현황",
          "sample_pbnstSttn.xlsx",
          "A1:U2",
          3
        );
      } else {
        toast.error(t("excelDownErrMsg"));
      }
    }
  }, [ruseExcelList]);
  useEffect(() => {
    if (ruseMapRes && ruseMapRes.length > 0) {
      setRuseTable(ruseMapRes);
    } else {
      setRuseTable([]);
    }
  }, [ruseMapRes]);

  return (
    <>
      <ContentsDiv>
        <div className="grid grid-cols-2 gap-4 ">
          <div className="col-span-2">
            <Title title="하수재이용 시설 현황" />
            <SearchBaseForm
              selectSidoData={code.cityCd}
              selectSigunData={code.sggCd}
              selectRegionData={code.rvbsnCd}
              selectUnitWaterShedData={code.lgbsnCd}
              selectMiddleRegionData={code.mdmbsnCd}
              selectEnvPartData={code.lclgvrnmntCd}
              buttonOrder={["query", "init", "excel"]}
              rightClassName="ml-auto mr-6 flex items-center space-x-1  "
              leftClassName="flex gap-5 w-9/12 m-4"
              leftSelectClassName="w-1/4"
              rightChildren={<></>}
              leftChildren={
                <div className="col-span-3 flex items-center">
                  <SelectBox
                    label="연도"
                    selectClass={"w-full  w-48 h-full text-2xl rounded-none"}
                    selectArray={yearOptions}
                    value={searchYear}
                    onSelectValue={(val: string | number) =>
                      setSearchYear(String(val))
                    }
                    className={""}
                    selectContentClass={''}
                  />
                  <Label className="mt-2 ml-4 w-full text-xl text-label">
                    {"하수처리시설명"}
                  </Label>
                  <SearchInput
                    className={"text-2xl w-full"}
                    label=""
                    textValue={pbnRuseNm || ""}
                    setText={(e) => {
                      setPbnRuseNm(e || "");
                    }}
                  />
                </div>
              }
              queryClick={() => {
                setIsReset(true);
              }}
              initClick={function (): void {
                setPbnRuseNm("");
              }}
              btnClass={btnClass}
              ref={ref}
              isAdmin={false}
              excelClick={function (returnType: ReturnType): void {
                ruseMapSearch(
                  true,
                  1,
                  1000000,
                  returnType,
                  searchYear,
                  fclts,
                  pbnRuseNm ?? ""
                );
              }}
            />
          </div>
          <div className="col-span-6">
            {/* 높이 조정 */}
            <UiTable
              tableData={ruseTable || []}
              headlist={ruseMapHeadList}
              pageSize={ruseMapSize}
              total={ruseMapCount || 0}
              headName={""}
              cellClick={ruseCellClick}
              onPageChange={(page) => {
                if (pbnRuseNm && pbnRuseNm.length > 0) {
                  ruseMapSearch(
                    false,
                    page,
                    ruseMapSize,
                    ref.current,
                    searchYear,
                    fclts,
                    pbnRuseNm
                  );
                } else {
                  ruseMapInit(
                    page,
                    ruseMapSize,
                    ref.current,
                    searchYear,
                    fclts
                  );
                }

                setIsReset(false);
              }}
              resetPageNo={isReset}
            />
          </div>
        </div>
      </ContentsDiv>
    </>
  );
}