import { useValue } from '@/stores/calculation/values/hooks';
import { useEffect, useState } from 'react';
import { useDebouncedCallback } from 'use-debounce';

export function useStoreValue(valueName) {
  const [storeValue, setStoreValue] = useValue(valueName);
  const [value, setValue] = useState(storeValue);

  const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, 350, { maxWait: 1_000 });

  useEffect(() => {
    if (storeValue !== value) {
      debouncedSetStoreValue(value);
    }
  }, [value]);

  useEffect(() => {
    setValue(storeValue);
  }, [storeValue]);

  return [value, setValue];
}