frontend/apps/sn/app/map/featureClickEventPopup.tsx

'use client'
import { VerticalTable } from "@/components/ui/verticalTable";
import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui";
import { useEffect, useRef, useState } from "react";
import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from "./components/common/table";
import { useGisContext } from "@common/business_components/ui/map/Gis";
import { getData } from "@/components/lib/api";
import { getLayerContentComponent } from "./components/common";
// TODO:
const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
    const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
    const featureId = featureData.getId(); // 피처의 id 가져오기
    const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
    const [tableData, setTableData] = useState<any>(null); // 피처 데이터 상태
    const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
    const [buttonChk, setButtonChk] = useState(true)
    const [fetchData, setfetchData] = useState<any>(); // api 호출여부
    const contentRef = useRef<HTMLDivElement>(null);
    // 피쳐데이터의 현재 레이어 이름 가져오는 함수
    const getSelectedLayers = () => {
        const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
        let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
        layers.forEach((layer: any) => {
            const source = layer.getSource();
            if (source && source.hasFeature && source.hasFeature(featureData)) {
                featureLayer = layer; // 피처가 속한 레이어 찾기
            }
        });
        return featureLayer.get('lyrNm'); // 레이어 이름 출력
    };
    useEffect(() => {
        const fetchData = async () => {
            if (featureId) {
                const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
                setLayerNm(selectedLayerName); // 상태 업데이트

                const data = await getData(`v1/fclts/${featureId}`);
                setfetchData(data)
                switch (selectedLayerName) {
                    case '하수처리시설':
                        setHeadlist(SwtrmtFcltCol);
                        setButtonChk(true)
                        break;
                    case '하수처리구역':
                        setHeadlist(SwtrmtPrcsZoneCol)
                        setButtonChk(false)
                        break;
                    case '중점우수토실':
                        setButtonChk(false)
                        break;
                    case '우수토실':
                        setButtonChk(true)
                        break;
                    case '하수관로':
                        setButtonChk(true)
                        break;
                    case '오수펌프':
                        setButtonChk(true)
                        break;
                    case '빗물펌프':
                        setButtonChk(true)
                        break;
                    default:
                        break;
                }
                setTableData(data);
            };
        }
        fetchData();
    }, [featureId]);
    //  TODO: api 호출작업 필요(사용자 입력부분)
    const btnClickEvent = () => {
        if (buttonChk && contentRef.current) {
            const inputElements = contentRef.current.querySelectorAll('input');
            const selectElements = contentRef.current.querySelectorAll('select');
            // select 태그의 값 가져오기
            console.log("Select Elements:", selectElements);
            console.log("Input Elements:", inputElements);
            selectElements.forEach((select) => {
                console.log("Select Value:", select.value);
            });

            // input 태그의 값 가져오기
            inputElements.forEach((input) => {
                console.log("Input Value:", input.value);
            });
        }
    }
    const ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null;
    return (
        <div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-10rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[200]">
            <div className="card-header bg-primary flex items-center justify-between p-4">
                <div className="flex mx-3 flex-col">
                    <h3 className="text-2xl font-medium text-white text-label">{layerNm} 정보</h3>
                    <div className="font-medium text-white text-label">(00구 00리 하수관로)</div>
                </div>
                <button
                    onClick={onClose}
                    className="text-white hover:text-gray-700 focus:outline-none"
                    aria-label="닫기"
                >
                    ✕
                </button>
            </div>
            <div className="overflow-y-auto flex-1" ref={contentRef}>
                <VerticalTable headName='LX 연계정보' tableData={[tableData]} headlist={headlist} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
                    throw new Error("Function not implemented.");
                }}></VerticalTable>
                <div className="w-full mx-5 flex items-center justify-end space-x-2">
                    {buttonChk ? <Button onClick={btnClickEvent} className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
                        저장
                    </Button> : null}
                </div>
                {ContentComponent && <ContentComponent featureData={fetchData} />}
            </div>
        </div>
    )
}
export default FeatureClickEventPopup;