"use client"

import { btnClass } from "@/app/store/common/code"
import type { customDrgt } from "@/app/store/matDmd/drgtSttn"
import { drgtDetailHeadListExport } from "@/app/store/matDmd/drgtSttn/headList"
import { downloadExcel, Title, UiTable } from "@common/business_components/ui"
import ListDiv from "@common/business_components/ui/list_div"
import { Button, ScrollArea } from "@common/components/ui"
import { useEffect, useState } from "react"

export default function DrgtDetailModal({
    data,
}: {
    data: customDrgt[];
}) {

    // const [isSggNm, setIsSggNm] = useState('')
    const [excelData, setExcelData] = useState<any[]>();
    const excelClick = () => {
        downloadExcel({
            data: excelData ?? [],
            fileName: `우리동네가뭄 상세현황 - ${data[0]?.sggNm}`,
            sheetNameArray: ["Sheet1"],
            headerRange: "A1:C1"
        })
    }

    useEffect(() => {
        const resData = Array.isArray(data) ? data : [data];
        const exData = Array.isArray(resData)
            ? resData.map((item: customDrgt) => {
                return {
                    "년": item.year,
                    "월": item.month,
                    "가뭄상태": item.drgtState, // Access drgtState directly from the item
                }
            }) : [];
        setExcelData(exData)
        // if(data&&data[0].sggNm){
        ////TODO: data.sggNm [0[인지 data.sggNm 인지 사용하는지 확인필요
        // setIsSggNm(data[0].sggNm)
        //  }
    }, [data])

    return (
        <>
            <div className="grid grid-cols-4 gap-4 h-full">
                <div className="col-span-4">
                    <div className="flex items-center justify-between">
                        <Title title={`우리동네가뭄 상세내용 - ${data[0] && data[0].sggNm ? data[0].sggNm : ''}`} />
                        <div className="flex flex-row space-x-2">
                            <Button
                                size={"sm"}
                                className={`${btnClass} green mt-12`}
                                onClick={excelClick}
                            >
                                다운로드
                            </Button>
                        </div>
                    </div>
                    <hr className="mt-2 mb-2" />
                    <div className="grid grid-cols-6 gap-4 ">
                        <div className="col-span-6">
                            <ListDiv>
                                <ScrollArea className="h-[63vh]">
                                    <UiTable
                                        headName={undefined}
                                        tableData={data}
                                        headlist={drgtDetailHeadListExport}
                                        pageSize={0}
                                        total={0}
                                        cellClick={undefined}
                                        onPageChange={() => { }}
                                    ></UiTable>
                                </ScrollArea>
                            </ListDiv>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}