import * as React from "react";
import { View, StyleSheet } from "react-native";
import {
  isTV,
  isTvOSPlatform,
} from "@applicaster/zapp-react-native-utils/reactUtils";

/*
  we use this Placeholder in order to prevent multiple unnecessary mounting inside ComponentsMap.
  Without it while mount attempt we get zero height for each component initially(because we don't have data yet).
  FlatList thinks that it doesn't have enough views(they have zero heights) and try mount next views in order to fill viewport.
  After receiving data and setup proper heights FlatList realises that it has enough non-zero-height components
  and starts unmount them(in order to satisfy windowSize constraints).
  This leads to mounting/unmounting unnecessary rows.

  Hack only for mobile:
  readyToBeDisplayed prop is used to prevent Placeholder from being displayed when flatList re-mount the component
*/

const styles = StyleSheet.create({
  placeholder: { width: 1000, height: 1000, flex: 1 },
});

type Props = {
  readyToBeDisplayed?: boolean;
};

export const Placeholder = ({ readyToBeDisplayed }: Props) => {
  if (isTvOSPlatform()) return null;

  if (readyToBeDisplayed && !isTV()) return null;

  return <View style={styles.placeholder} />;
};