import { useEffect, useRef } from "react";

// Auto-refresh driver. The callback receives whether a <select> currently
// has focus; callers must skip select-rebuilding loads in that case, so a
// refresh never yanks a dropdown the user is choosing from. Form state
// lives in React state and is never overwritten by a refresh, so a form
// being typed is never cleared.
export function useAutoRefresh(tick: (selectFocused: boolean) => void, ms: number) {
  const cb = useRef(tick);
  cb.current = tick;
  useEffect(() => {
    const id = setInterval(() => {
      const ae = document.activeElement;
      cb.current(ae ? ae.tagName === "SELECT" : false);
    }, ms);
    return () => clearInterval(id);
  }, [ms]);
}

export function useIntervalMs(cb: () => void, ms: number) {
  const ref = useRef(cb);
  ref.current = cb;
  useEffect(() => {
    const id = setInterval(() => ref.current(), ms);
    return () => clearInterval(id);
  }, [ms]);
}

export function formatRefreshTime(d: Date): string {
  const p = (n: number) => String(n).padStart(2, "0");
  return p(d.getHours()) + ":" + p(d.getMinutes()) + ":" + p(d.getSeconds());
}