"use client";

import { Skeleton } from "@/components/ui/skeleton";
import dynamic from "next/dynamic";
import type { PublicGuide } from "@/lib/guides/queries";

import { createContext, useContext, useState, type ReactNode } from "react";

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const LazyWeaponChart = dynamic(() => import("./weapon-chart").then((module) => module.WeaponChart), {
  loading: () => <Skeleton className="h-80 rounded-xl" aria-label="กำลังโหลดกราฟ" />,
});

const WeaponModeContext = createContext<{
  mode: string;
  setMode: (mode: string) => void;
} | null>(null);

export function WeaponDisplayModeProvider({ children }: { children: ReactNode }) {
  const [mode, setMode] = useState("normal");

  return (
    <WeaponModeContext.Provider value={{ mode, setMode }}>
      {children}
    </WeaponModeContext.Provider>
  );
}

export function WeaponDisplayMode({
  children,
  rows,
  exporting = false,
}: {
  children: ReactNode;
  rows: PublicGuide["weaponGroups"][number]["rows"];
  exporting?: boolean;
}) {
  const context = useContext(WeaponModeContext);

  if (!context) throw new Error("WeaponDisplayMode requires WeaponDisplayModeProvider");
  const { mode, setMode } = context;

  if (exporting) return children;

  return (
    <div className="flex min-w-0 flex-col gap-3">
      <ToggleGroup
        aria-label="รูปแบบการแสดงอาวุธ"
        variant="outline"
        value={[mode]}
        onValueChange={(values) => {
          if (values[0]) setMode(values[0]);
        }}
      >
        <ToggleGroupItem value="normal" className="max-sm:min-h-11">รายการ</ToggleGroupItem>
        <ToggleGroupItem value="chart" className="max-sm:min-h-11">กราฟ</ToggleGroupItem>
      </ToggleGroup>
      {mode === "chart" ? <LazyWeaponChart rows={rows} /> : children}
    </div>
  );
}