"use client";

import { useEffect, useState } from "react";
import { STOCK_TAKE_QTY_GAP_WARN_PERCENT } from "./stockTakeQtyGapWarning";
import {
  fetchStockTakeQtyGapWarnPercent,
  STOCK_TAKE_QTY_GAP_SETTING_EVENT,
} from "./qtyGapWarnSettingClient";

/** Warning threshold from settings (`STOCK_TAKE.qtyGapWarnPercent`), default 50. */
export function useStockTakeQtyGapWarnPercent(): number {
  const [percent, setPercent] = useState(STOCK_TAKE_QTY_GAP_WARN_PERCENT);

  useEffect(() => {
    let cancelled = false;
    fetchStockTakeQtyGapWarnPercent()
      .then((n) => {
        if (!cancelled) setPercent(n);
      })
      .catch(() => {});
    const onChange = (event: Event) => {
      const next = (event as CustomEvent<number>).detail;
      if (Number.isFinite(next)) setPercent(next);
    };
    window.addEventListener(STOCK_TAKE_QTY_GAP_SETTING_EVENT, onChange);
    return () => {
      cancelled = true;
      window.removeEventListener(STOCK_TAKE_QTY_GAP_SETTING_EVENT, onChange);
    };
  }, []);

  return percent;
}