"use client";

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

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

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,
  chart,
  exporting = false,
}: {
  children: ReactNode;
  chart: ReactNode;
  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="Weapon display mode"
        variant="outline"
        value={[mode]}
        onValueChange={(values) => {
          if (values[0]) setMode(values[0]);
        }}
      >
        <ToggleGroupItem value="normal">List</ToggleGroupItem>
        <ToggleGroupItem value="chart">Chart</ToggleGroupItem>
      </ToggleGroup>
      {mode === "chart" ? chart : children}
    </div>
  );
}