import { useState, useEffect, useRef } from 'react';

export function useAutoSave(
  value: string,
  onSave: (value: string) => void,
  delay = 600
): [string, (v: string) => void] {
  const [local, setLocal] = useState(value);
  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
  const savedValueRef = useRef(value);

  useEffect(() => {
    if (value !== savedValueRef.current) {
      savedValueRef.current = value;
      setLocal(value);
    }
  }, [value]);

  const handleChange = (v: string) => {
    setLocal(v);
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      savedValueRef.current = v;
      onSave(v);
    }, delay);
  };

  useEffect(() => () => clearTimeout(timerRef.current), []);

  return [local, handleChange];
}