import { useEffect, useMemo, useReducer } from "react";
import { Navigation } from "react-native-navigation";

type Action =
  | {
      action: "push";
      componentId: string;
    }
  | {
      action: "pop";
      componentId: string;
    };

const reducer = (stack: string[], action: Action): string[] => {
  switch (action.action) {
    case "push": {
      stack.push(action.componentId);
      break;
    }
    case "pop": {
      const index = stack.indexOf(action.componentId);
      if (index > -1) stack.splice(index, 1);
      break;
    }
  }
  return [...stack];
};

export const useIsScreenFocused = (componentId: string): boolean => {
  const [componentStack, dispatch] = useReducer(reducer, [componentId]);
  const isFocussed = useMemo(
    () => componentStack[componentStack.length - 1] === componentId,
    [componentStack, componentId]
  );

  useEffect(() => {
    const listener = Navigation.events().registerComponentDidAppearListener(
      (event) => {
        if (event.componentType !== "Component") return;
        dispatch({
          action: "push",
          componentId: event.componentId,
        });
      }
    );

    return () => listener.remove();
  }, []);
  useEffect(() => {
    const listener = Navigation.events().registerComponentDidDisappearListener(
      (event) => {
        if (event.componentType !== "Component") return;
        dispatch({
          action: "pop",
          componentId: event.componentId,
        });
      }
    );

    return () => listener.remove();
  }, []);

  return isFocussed;
};