import * as React from "react";
import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
import { useFocusManager } from "@applicaster/zapp-react-native-utils/focusManager";

export const useCellState = (id: string) => {
  const focusManager = useFocusManager();

  const [currentCellFocused, setCurrentCellFocused] = React.useState(
    focusManager.isFocused(id)
  );

  React.useEffect(() => {
    const handler = (focusable) => {
      const isChildren = focusManager.isFocusableChildOf(focusable, id);
      setCurrentCellFocused(isChildren);
    };

    focusManager.on(FOCUS_EVENTS.FOCUS, handler);

    return () => {
      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
    };
  }, [id]);

  return currentCellFocused;
};