import * as React from "react";
import { View, StyleSheet } from "react-native";
import { ScreenLayoutContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenLayoutContext";
import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
import { useScreenConfiguration } from "../../River/useScreenConfiguration";

type Props = {
  children: React.ReactNode;
  isVisible: boolean;
  onReady: (boolean) => any;
};

const styles = StyleSheet.create({
  container: { position: "absolute", top: 0, zIndex: 10, width: 1920 },
});

export const NavBarContainer = ({ children, isVisible, onReady }: Props) => {
  const screenLayout = React.useContext(ScreenLayoutContext);
  const screenMarginTop = screenLayout?.screenMarginTop || 0;
  const screen = useCurrentScreenData();
  const screenConfig = useScreenConfiguration(screen?.id);

  const themeStyles = React.useMemo(
    () => ({
      // limits the height of the focusable container of the TopMenuBarTV component
      // to prevent it from being overlapped by the screen content,
      // as it makes TopMenuBarTV unfocusable on tvOS
      maxHeight: ifEmptyUseFallback(screenConfig?.marginTop, screenMarginTop),
    }),
    [screenLayout, screenConfig]
  );

  React.useEffect(() => {
    setTimeout(() => {
      onReady?.(true);
    }, 0);
  }, []);

  return isVisible ? (
    <View testID="nav-bar-container" style={[styles.container, themeStyles]}>
      {children}
    </View>
  ) : null;
};