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

'use client'
import { VerticalTable } from "@/components/verticalTable";
import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui";
import { useState } from "react";
import { CommonTableColumn } from "./table";
const inputColumn = [
    { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
    { id: "guyeok", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
    { id: "basu", title: "배수구역", type: "input" },
    { id: "bungu", title: "배수분구", type: "input" },
    { id: "wltjs", title: "지선/간선", type: "select", options: ["지선", "간선"] },
    { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
    { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
];

const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData:any }) => {
    // TODO: 런타임 에러 해결 필요
    const [repairData, setRepairData] = useState([
        { year: "2025", type: "개대체" },
        { year: "2025", type: "보수" },
    ]);

    const [cleaningData, setCleaningData] = useState([
        { year: "2025", type: "청소" },
        { year: "2025", type: "준설" },
    ]);

    const [inspectionData, setInspectionData] = useState([
        { year: "2025", type: "관로기술진단" },
        { year: "2025", type: "관로기술진단" },
    ]);
    const handleInputChange = (section: string, index: number, field: string, value: string) => {
        const updateData = (data: { year: string; type: string }[], setData: React.Dispatch<React.SetStateAction<{ year: string; type: string }[]>>) => {
            const updated = [...data];
            if (updated[index]) {
                updated[index][field as keyof typeof updated[number]] = value;
            }
            setData(updated);
        };

        if (section === "repair") {
            updateData(repairData, setRepairData);
        } else if (section === "cleaning") {
            updateData(cleaningData, setCleaningData);
        } else if (section === "inspection") {
            updateData(inspectionData, setInspectionData);
        }
    };
    function transformFeatureDataToArray(featureData: any, keys: string[]) {
        // 필요한 키만 추출하여 새로운 객체 생성
        const transformedData = keys.reduce((acc, key) => {
            acc[key] = featureData[key] !== undefined ? featureData[key] : "N/A"; // 값이 없으면 "N/A"로 처리
            return acc;
        }, {} as Record<string, any>);
    
        // 배열로 감싸서 반환
        return [transformedData];
    }
    const keys = CommonTableColumn.map((column) => column.id);
    const transformedFeatureData = transformFeatureDataToArray(featureData, keys);
    const renderSection = (title: string, data: { year: string; type: string }[], sectionKey: string) => (
        <div>
            {/* 섹션 제목 */}
            <div className="card-header">
                <h3 className="text-2xl mx-3 font-medium text-label">{title}</h3>
            </div>
            {/* 테이블 */}
            <div className="card !m-[1.2rem] !p-0r">
                <Table variant="secondary" className="w-full">
                    <TableHeader>
                        <TableRow>
                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">년도</TableHead>
                            <TableHead className="border border-gray-300 px-2 py-2 text-sm">구분</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {data.map((row, index) => (
                            <TableRow key={index}>
                                <TableCell className="border border-gray-300 px-2 py-2 text-sm">
                                    <input
                                        type="text"
                                        value={row.year}
                                        onChange={(e) => handleInputChange(sectionKey, index, "year", e.target.value)}
                                        className="w-full text-xl border-radius-0 px-3 py-2 text-base text-center leading-normal"
                                    />
                                </TableCell>
                                <TableCell className="border border-gray-300 px-2 py-2 text-sm text-center leading-normal">{row.type}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
        </div>
    );
    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-[1000]">
            <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">하수관로 정보</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">
                <VerticalTable headName='LX 연계정보' tableData={transformedFeatureData} headlist={CommonTableColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
                    throw new Error("Function not implemented.");
                }}></VerticalTable>
                <VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={20} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
                    throw new Error("Function not implemented.");
                }}></VerticalTable>
                {/* here */}
                {renderSection("보수 및 갱신", repairData, "repair")}
                {renderSection("청소 및 준설", cleaningData, "cleaning")}
                {renderSection("점검 및 진단", inspectionData, "inspection")}
            </div>
            <div className="w-full mx-5 flex items-center justify-end space-x-2">
                <Button className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
                    저장
                </Button>
            </div>
        </div>
    )
}
export default FeatureClickEventPopup;