"use client";

import { useEffect,  useState } from "react";
import WrOverLayTable from "../WrOverLayTable/WrOverLayTable";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@common/components/ui";
import { getOverLayObj } from "@/components/lib/func/mapUtil";


type RuseTabData = {
  data: Record<string, string>;
  tabData:{
    pbnstRuseFcltId: string;
    ruseUtztnFcltNm: string;
  }
}


export default function WrOverLayRuse({ overLayData }: { overLayData: any }) {
  const [fcltTab, setFcltTab] = useState<string>("");
  const [ruseData, setRuseData] = useState<RuseTabData[]>([]as RuseTabData[]);  
  // useEffect(() => {
  //   const detail = overLayData.find((list) => list.pbnstRuseFcltId === fcltTab);
  //   if (detail) setIsDetail(detail);
  // }, [fcltTab, overLayData]);

  useEffect(() => {

    if (overLayData && overLayData[0]) {
      setFcltTab(overLayData[0].pbnstRuseFcltId);

       const newRuseData= overLayData.map((ruse) =>{
        const isData = getOverLayObj( '하수재이용시설',ruse);
        return {
         data: isData.newObj,
         tabData:{
          pbnstRuseFcltId: ruse.pbnstRuseFcltId,
          ruseUtztnFcltNm: ruse.ruseUtztnFcltNm
         }
        }
       })

       setRuseData(newRuseData);
    }
  }, [overLayData]);

  if (!(overLayData && overLayData[0])) return;
  return (
    <>
      <div>
      <div className="bg-sky-600 text-white text-center font-semibold py-2 text-2xl">
          </div>
        <Tabs value={fcltTab} onValueChange={setFcltTab}>
          <TabsList className="mt-2 mb-2 gap-6 flex flex-wrap">
            {ruseData?.map((item, index) => {
              return (
                <TabsTrigger

                  key={item.tabData.pbnstRuseFcltId + index}
                  className="text-center  !text-base  size-3/12"
                  value={item.tabData.pbnstRuseFcltId}
                >
                  {item.tabData.ruseUtztnFcltNm}
                </TabsTrigger>
              );
            })}
          </TabsList>

          {ruseData?.map((item) => (
            <TabsContent
              key={item.tabData.pbnstRuseFcltId}
              className="flex-1 px-4 py-3"
              value={item.tabData.pbnstRuseFcltId}
            >
              <div className="mb-4">
                <WrOverLayTable overLayData={item.data} />
              </div>
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </>
  );
}