frontend/apps/wr/app/map/components/layerPopup/reuseFacility.tsx

import { useWrStore } from "@/app/store";
import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
import { Title, UITab, UiTable } from "@common/business_components/ui";
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
import { useState, useEffect, useCallback } from "react";
interface Props {
    seletectedLayerNm: string;
    viewMode: 'list' | 'detail' | 'nothing';
    setFcltPk: (pk: string) => void;
    onFeatureSelect: (feature: any) => void;
    onClose: () => void;
    actTabData: { id: string; name: string; data: any } | undefined;
    tabData: { id: string; name: string; data: any }[];
}
const ResueFacility = ({ viewMode, seletectedLayerNm, tabData, actTabData, setFcltPk, onFeatureSelect, onClose}: Props) => {
    const [activeTab, setActiveTab] = useState<string>(''); // 현재 활성화된 탭
    // 하수재이용시설 변수
    const {
        pbnstSttn,
        pbnstSttnSearch,
        pbnSttnInit,
        getFlcts
    } = useWrStore((state) => state);
    const { fclts, pbnstSttnResCount } = pbnstSttn
    const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>()
    // 재이용시설 cellClick 이벤트 (상세정보)
    const pbnstCellClick = (index: number | undefined) => {
        if (
            index !== undefined &&
            pbnstSttn.pbnstSttnRes &&
            pbnstSttn.pbnstSttnRes[index]
        ) {
            setFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltId);
            onFeatureSelect(pbnstSttn.pbnstSttnRes[index]);
            onClose()
        }
    };

    // 재이용 현황 초기값
    useEffect(() => {
        if (seletectedLayerNm !== '하수재이용시설' || viewMode !='list') return;
        if (!pbnstSttn.isInit) {
            getFlcts()
        }
    }, [seletectedLayerNm, pbnstSttn.isInit]);
    useEffect(() => {
        if (seletectedLayerNm !== '하수재이용시설' || viewMode !='list') return;
        pbnSttnInit("1", "20", {
            partValue: "A",
            sidoValue: '0',
            sigunValue: "0",
            regionValue: "",
            unitWaterShedValue: "",
            middleRegionValue: "",
            envPartValue: "",
            sidoText: "",
            sigunText: ""
        }, String(new Date().getFullYear()), pbnstSttn.fclts);
    }, [fclts, pbnSttnInit, pbnstSttn.fclts, seletectedLayerNm])
    useEffect(() => {
        setBdstTable(pbnstSttn.pbnstSttnRes);
    }, [seletectedLayerNm, pbnstSttn.pbnstSttnRes]);

    // 재이용시설 조회
    // 재이용시설 페이징처리 관련 함수
    const onPageChangeHandler = useCallback((page: number) => {
        if (seletectedLayerNm !== '하수재이용시설' || viewMode !='list') return;
        pbnstSttnSearch(
            false,
            String(page),
            String(20),
            {
                partValue: "A",
                sidoValue: "0",
                sigunValue: "0",
                regionValue: "",
                unitWaterShedValue: "",
                middleRegionValue: "",
                envPartValue: "",
                sidoText: "",
                sigunText: "",
            },
            "",
            String(new Date().getFullYear()), fclts
        );
    }, [fclts, pbnstSttnSearch]);
    // FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제.
    // const excelClick = useCallback(() => {
    //   // if (codeData) pbnstSttnSearch(1, "10000", codeData);
    //   excelDownload(
    //     [[]],
    //     "하수재이용시설 현황",
    //     "sample_pbnstSttn.xlsx",
    //     "A1:U2"
    //   );
    // }, [pbnstSttnSearch]);
    return (
        viewMode == 'detail' ?
            // 재이용시설 상세
            <>
                <div className="flex justify-between items-center mb-4">
                    <Title title="하수재이용시설 상세정보" />
                </div>
                <div className="flex justify-between items-center mb-8">
                    <UITab
                        defaultValue={activeTab}
                        tabList={tabData.map((tab) => ({
                            value: tab.id,
                            label: tab.name,
                            onClick: () => setActiveTab(tab.id),
                        }))}
                    />
                </div>
                <PbnstSttnModal
                    data={actTabData?.data[0] || ({} as customPbnst)}
                    titleVisible={false}
                />
            </> :
            <div style={{ overflowY: 'auto' }}>
                <div className="flex justify-between items-center">
                    <Title title="하수재이용시설 현황" />
                    {/* <div className="flex gap-2 mt-8">
                    <Button className={btnClass} color="primary" onClick={excelClick}>
                      엑셀다운로드
                    </Button>
                  </div> */}
                </div>
                <UiTable
                    headName={[]}
                    tableData={bdstTable || []}
                    headlist={pbnstSttn.pbnstSttHeadList}
                    pageSize={20}
                    total={pbnstSttnResCount || 0}
                    cellClick={(index: number | undefined) => {
                        pbnstCellClick(index);
                    }}
                    onPageChange={onPageChangeHandler}
                >
                    <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
                </UiTable>
            </div>
    )
}
export default ResueFacility;