import { useState } from "react";
import { isBrowser } from "@reins/utils";

import { useDocumentEvent, useWindowEvent } from "hooks";

export type FocusType = boolean;

const getState = () => (isBrowser ? document.visibilityState === "visible" : false);

/**
 * Detects if the page is focused or not.
 * @kind 01-Client
 * @param initialState Initial value of focus.
 * @returns Boolean value of focus.
 * @example Base usage
 * ```tsx
 * const isFocused = useFocus();
 * console.log(isFocused); // true or false
 * ```
 */
export const useFocus = (initialState?: boolean): FocusType => {
  const [focus, setFocus] = useState(initialState ?? getState);

  useDocumentEvent("visibilitychange", () => setFocus(true));
  useWindowEvent("focus", () => setFocus(true));
  useWindowEvent("blur", () => setFocus(false));

  return focus;
};