import { useEffect, useRef, useState } from "react";
import { AppState, Text } from "react-native";

export function useAppActive() {
  const [active, setActive] = useState(AppState.currentState === "active");
  useEffect(() => {
    const sub = AppState.addEventListener("change", (next) => {
      setActive(next === "active");
    });
    return () => sub.remove();
  }, []);
  return active;
}

export function SecureGate({ children }: { children: React.ReactNode }) {
  const appState = useRef(AppState.currentState);
  const [locked, setLocked] = useState(false);

  useEffect(() => {
    const sub = AppState.addEventListener("change", (next) => {
      if (
        appState.current === "active" &&
        next.match(/inactive|background/)
      ) {
        setLocked(true);
      }
      appState.current = next;
    });
    return () => sub.remove();
  }, []);

  if (locked) return <Text>Unlock to continue</Text>;
  return <>{children}</>;
}