"use client";

import { useEffect, useState } from "react";
import WrOverLayTable from "../WrOverLayTable/WrOverLayTable";
import {
  Button,
} from "@common/components/ui";
import { getOverLayObj } from "@/components/lib/func/mapUtil";
import { ChevronLeft, ChevronRight } from "lucide-react";

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

export default function WrOverLayRuse({ overLayData }: { overLayData: any }) {
  const [ruseData, setRuseData] = useState<RuseTabData[]>([] as RuseTabData[]);
  const [idx, setIdx] = useState(0);
  const loop = true;
  const go = (next: number) => {
    if (loop) {
      const n = (next + ruseData.length) % ruseData.length;
      setIdx(n);
    } else {
      setIdx(Math.max(0, Math.min(ruseData.length - 1, next)));
    }
  };
  const prev = () => go(idx - 1);
  const next = () => go(idx + 1);

  useEffect(() => {
    if (overLayData && overLayData[0]) {

      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="mt-2 flex items-center gap-2">
          <Button
            variant="outline"
            size="icon"
            color="white"
            onClick={prev}
            disabled={!loop && idx === 0}
            aria-label="이전"
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>

          <div className="flex-1 select-none rounded-md border px-4 py-2 text-center">
            {/* 가운데 이름만 노출 */}
            <span className="text-xl font-medium">
              {ruseData[idx]?.tabData.ruseUtztnFcltNm ?? ""}
            </span>
          </div>

          <Button
            variant="outline"
            size="icon"
            onClick={next}
            color="white"
            disabled={!loop && idx === ruseData.length - 1}
            aria-label="다음"
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>

        <div className="mb-4">
          <WrOverLayTable overLayData={ruseData[idx]?.data??[{'확인불가':''}]} />
        </div>
      </div>
    </>
  );
}