"use client";

import { useState } from "react";
import { SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel } from "@seed-design/react";
import { isHidden, setHidden } from "./money";

/** Dispatched on `window` whenever the global hide-amounts flag changes, so
 * pages that render amounts elsewhere (not through this switch) can re-render. */
export const HIDE_AMOUNTS_EVENT = "mercury:hideamounts";

export interface HideAmountsToggleProps {
  label?: string;
}

export function HideAmountsToggle({ label = "Мөнгөн дүн нуух" }: HideAmountsToggleProps) {
  const [checked, setChecked] = useState<boolean>(() => isHidden());

  function handleChange(next: boolean) {
    setHidden(next);
    setChecked(next);
    if (typeof window !== "undefined") {
      window.dispatchEvent(new CustomEvent(HIDE_AMOUNTS_EVENT, { detail: { hidden: next } }));
    }
  }

  return (
    <SwitchRoot checked={checked} onCheckedChange={handleChange}>
      <SwitchControl>
        <SwitchThumb />
      </SwitchControl>
      <SwitchLabel>{label}</SwitchLabel>
    </SwitchRoot>
  );
}