import * as React from "react";
import { StyleSheet, View } from "react-native";

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

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    top: 0,
    zIndex: 10,
    flex: 1,
    width: "100%",
  },
  themeStyles: {
    // 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: 1,
  },
});

export const NavBarContainer = ({ children, isVisible, onReady }: Props) => {
  React.useEffect(() => {
    setTimeout(() => {
      onReady?.(true);
    }, 0);
  }, [onReady]);

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