"use client";

import * as React from "react";

export function useHiddenInputSync(value: string) {
  const inputRef = React.useRef<HTMLInputElement | null>(null);
  const mountedRef = React.useRef(false);

  React.useEffect(() => {
    const input = inputRef.current;

    if (!input) {
      return;
    }

    if (!mountedRef.current) {
      mountedRef.current = true;
      return;
    }

    input.dispatchEvent(new Event("input", { bubbles: true }));
    input.dispatchEvent(new Event("change", { bubbles: true }));
  }, [value]);

  return inputRef;
}