import { VerticalTable } from '@/components/ui/verticalTable';
import React, { useState } from 'react'
import InputSection from '../InputSection';
import { handleInputChange } from '../common';
import { Button } from '@common/components/ui';
import InfilChart from './chart/infilChart';
// 하수관로
// TODO: RDII 버튼인가 그거 팝업 두개 구현 필요
const inputColumn = [
    { id: "title", title: "설치주제", type: "select", options: ["BTL", "재정사업"] },
    { id: "swtrmt_zone_cd", title: "처리구역", type: "select", options: ["구역1", "구역2"] },
    { id: "basu", title: "배수구역", type: "input" },
    { id: "mltv_dtdv_nm", title: "배수분구", type: "input" },
    { id: "wltjs", title: "지선/간선", type: "select", options: ["지선", "간선"] },
    { id: "flow", title: "흐름방식", type: "select", options: ["자연유하", "압송"] },
    { id: "place", title: "매설위치", type: "select", options: ["도로", "하상"] },
];
const SwtrmtFclt = ({ featureData }: { featureData: any }) => {
    console.log("featureData", featureData);
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    const [btnTxt, setBtnTxt] = useState<string>("");
    const openModal = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.currentTarget.textContent && setBtnTxt(e.currentTarget.textContent)
        setIsModalOpen(true);
    };
    const closeModal = () => {
        setIsModalOpen(false);
    };
    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 dataMap = {
        repair: { data: repairData, setData: setRepairData },
        cleaning: { data: cleaningData, setData: setCleaningData },
        inspection: { data: inspectionData, setData: setInspectionData },
    };
    const keysToExtract = [
        "swtrmt_zone_cd",
        "mltv_dtdv_nm",
        "fid",
        "lyrTypeNm",
        "reg_dt",
        "mdfcn_dt",
        "rgtr",
        "mdfr",
    ];
    // const filteredData = Object.entries(featureData)
    // .filter(([key]) => keysToExtract.includes(key)) // 필요한 키만 필터링
    // .map(([key, value]) => ({ key, value: value ?? "N/A" })); // 테이블 데이터 형식으로 변환

    return (
        <div>
            <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>
            <InputSection title="보수 및 갱신" data={repairData} sectionKey="repair" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
            <InputSection title="청소 및 준설" data={cleaningData} sectionKey="cleaning" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
            <InputSection title="점검 및 진단" data={inspectionData} sectionKey="inspection" onInputChange={(section, index, field, value) => handleInputChange(section, index, field, value, dataMap)} />
            <div className="absolute bottom-0 left-0 w-full flex justify-start space-x-2 p-4">
                <Button
                    className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                    onClick={openModal}
                >
                    Infil
                </Button>
                <Button
                    className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
                    onClick={openModal}
                >
                    RDII
                </Button>
            </div>
            <InfilChart btnTxt={btnTxt} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal} />
        </div>
    )
}

export default SwtrmtFclt