"use client";

import { useState } from "react";
import type { WindowPopupKey } from "@/features/windowPopup/model/popupDefinitions";

type Props = {
  onOpenPopup: (popupKey: WindowPopupKey) => void;
};

const ANALYSIS_POPUP_ITEMS: Array<{ key: WindowPopupKey; label: string }> = [
  { key: "pipeAnalysisPopup", label: "관로분석" },
  { key: "floodPredictionMapPopup", label: "침수예측지도" },
  { key: "floodHistoryPopup", label: "침수발생이력" },
  { key: "gisEditPopup", label: "GIS 편집" },
  { key: "gisManagementPopup", label: "GIS 관리" },
  { key: "flowRiskPopup", label: "통수 위험" },
];

export default function AnalysisPopupMenu({ onOpenPopup }: Props) {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className="absolute right-[0.35rem] top-[53%] z-[70]">
      <div className="relative">
        {isOpen ? (
          <div className="absolute right-[21px] top-1/2 flex w-[86px] -translate-y-1/2 flex-col gap-[3px]">
            {ANALYSIS_POPUP_ITEMS.map((item) => (
              <button
                key={item.key}
                type="button"
                className="min-h-[40px] rounded-md border border-primary bg-primary px-2 py-1 text-center text-[1rem] font-semibold leading-[1.2] text-white shadow transition hover:brightness-95"
                onClick={() => onOpenPopup(item.key)}
              >
                <span className="break-keep whitespace-normal">{item.label}</span>
              </button>
            ))}
          </div>
        ) : null}

        <button
          type="button"
          className="flex h-[36px] w-[18px] items-center justify-center rounded-sm border border-[#2f5c9b] bg-white text-[0.9rem] font-bold text-[#2f5c9b] shadow transition hover:bg-slate-50"
          onClick={() => setIsOpen((value) => !value)}
          title={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
          aria-label={isOpen ? "분석 메뉴 접기" : "분석 메뉴 펼치기"}
        >
          {isOpen ? ">" : "<"}
        </button>
      </div>
    </div>
  );
}