import React, { useState } from 'react'
import { type ChartConfig, MainChart, CHART_FORM } from "@common/business_components";
import Modal from '@/components/ui/modal';
import { Button } from '@common/components/ui';
type ModalOpenProp = {
    isModalOpen: boolean,
    setIsModalOpen: (open: boolean) => void,
    closeModal: () => void,
    btnTxt?: string,
}
const InfilChart = ({ btnTxt, isModalOpen, setIsModalOpen, closeModal }: ModalOpenProp) => {
    const [popupOpen, setPopupOpen] = React.useState(false);
    const buttonRef = React.useRef<HTMLButtonElement>(null); // 버튼 참조
    const [popupPosition, setPopupPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 }); // 팝업 위치
    const openPopup = () => {
        if (buttonRef.current) {
            const rect = buttonRef.current.getBoundingClientRect(); // 버튼 위치 계산
            setPopupPosition({
                top: rect.bottom + window.scrollY, // 버튼 아래쪽
                left: rect.left + window.scrollX, // 버튼 왼쪽
            });
        }
    setPopupOpen(true); // 팝업 열기
    };
    console.log("btnTxt", btnTxt);
    const closePopup = () => {setPopupOpen(false);}; // 팝업 닫기
    const chartForm = CHART_FORM.LINE;
    const chartData = {
        chartData1: [
            { label: "1", val: 20 },
            { label: "3", val: 40 },
            { label: "5", val: 60 },
          ],
          chartData2: [
            { label: "1", val: 15 },
            { label: "3", val: 35 },
            { label: "5", val: 55 },
          ],
        }
        const chartConfig = Object.values(chartData).flat().reduce((config, element) => {
            config[element.label] = {
                label: element.label,
                color: "hsl(var(--chart-1))",
            };
            return config;
        }, {} as Record<string, { label: string; color: string }>) satisfies ChartConfig;
    const getCurrentDate = () => {
        const today = new Date();
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, "0"); // 월은 0부터 시작하므로 +1
        return `${year}-${month}`;
    };
    return (
        <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
            {/* 분석 입력현황 조회 */}
            <div className='grid grid-cols-4 gap-4'>
                <div className="grid grid-rows-4 gap-4 mb-4">
                    <Button className="bg-white text-white w-[130px] font-bold px-4 mt-2 py-2" onClick={openPopup}>
                        분석 입력현황 조회
                    </Button>

                    {/* 침입수량 분석결과 */}
                    <div className="bg-white text-red-600 font-bold px-4 py-2 ">
                        침입수량 분석결과
                        <div className="flex items-center mt-2">
                            <span className="text-black text-xl font-bold">120</span>
                            <span className="ml-2 text-black">m³/d</span>
                        </div>
                    </div>
                </div>
                {/* 차트 */}
                <div className="w-[500px] h-[300px] bg-white p-4">
                    <MainChart chartConfig={chartConfig} chartForm={chartForm} chartData={chartData} chartTitle={'관로유량'} />
                </div>
            </div>
            {popupOpen && (
                <div
                    className="absolute bg-gray-100 border border-gray-300 w-[320px] shadow-lg p-4 rounded"
                    style={{
                        top: popupPosition.top,
                        left: popupPosition.left,
                        zIndex: 1000,
                    }}
                >
                    <div className="text-lg font-bold mb-2">분석 입력현황</div>
                    <div className="grid grid-cols-2 gap-2">
                        <div>상수사용량 정보:</div>
                        <div>
                            <input type='month' defaultValue={getCurrentDate()} className="border border-gray-300 rounded px-2 py-1"/>
                        </div>
                        <div>오수 전환율:</div>
                        <div>
                            <select className="border border-gray-300 rounded px-2 py-1">
                                <option>0.85</option>
                                <option>0.90</option>
                            </select>
                        </div>
                        <div>수용가-맨홀 매칭:</div>
                        <div>
                            <select className="border border-gray-300 rounded px-2 py-1">
                                <option>매칭(양평).shp</option>
                                <option>매칭(서울).shp</option>
                            </select>
                        </div>
                        <div>관망도 자료:</div>
                        <div>
                            <select className="border border-gray-300 rounded px-2 py-1">
                                <option>양평.inp</option>
                                <option>서울.inp</option>
                            </select>
                        </div>
                        {btnTxt === 'RDII' ?  <><div>강우 자료:</div>
                        <div>
                            <select className="border border-gray-300 rounded px-2 py-1">
                                <option>R20240815.xlsx</option>
                            </select>
                        </div>
                        <div>RTX 계수 출처:</div>
                        <div>
                            <select className="border border-gray-300 rounded px-2 py-1">
                                <option>2015년 하수도정비기본계획</option>
                            </select>
                        </div>
                        </> : null}
                    </div>
                    <div className="flex justify-end mt-4 space-x-2">
                        <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
                            저장
                        </button>
                        <button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closePopup}>
                            종료
                        </button>
                    </div>
                </div>
            )}
        </Modal>
    )
}

export default InfilChart