import React from "react";
import { StyleSheet, View } from "react-native";
import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";

type Props = {
  visible?: boolean;
  flatListHeight?: number;
  isAnyLoaded: boolean;
};

const FOOTER_COMPONENT_HEIGHT = 200;

const footerStyles = StyleSheet.create({
  container: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
});

function RiverFooterComponent(props: Props) {
  const { visible = true, flatListHeight, isAnyLoaded } = props;

  if (!visible) return null;

  return (
    <View
      renderToHardwareTextureAndroid={true}
      style={{
        ...footerStyles.container,
        height: isAnyLoaded ? FOOTER_COMPONENT_HEIGHT : flatListHeight,
      }}
    >
      <Spinner size={isAnyLoaded ? "small" : "large"} />
    </View>
  );
}

export const RiverFooter = React.memo<Props>(RiverFooterComponent);