import React, { useMemo, useState, useCallback } from 'react';
import { 
  View, 
  Button,
  StyleSheet, 
  SafeAreaView, 
} from 'react-native';

import FastImage from 'react-native-fast-image'

import PagerView from 'react-native-pager-view';

const data = new Array(100).fill(1)

function App() {
  const [visible, setVisible] = useState(true)

  const onPress = useCallback(() => {
    setVisible((x) => !x)
  }, [])

  return (
    <SafeAreaView style={{ flex: 1}}>
      <View style={{ flex: 0 }}>
        <Button title={'Toggle'} onPress={onPress} />
      </View>
      <Toggle visible={visible}>
        <Pager />
      </Toggle>
    </SafeAreaView>
  );
};

function Toggle({ visible, children }) {
  return visible
    ? children
    : null
}

function Pager() {  
  const content = useMemo(() => {
    return data.map((x, i) => {
      return <Image value={i} key={i} />
    })
  }, [data])

  return (
    // Apply comment to the below line to demo memory is stable without this component
    <PagerView style={styles.pagerView} initialPage={0}>
      <View key="1">
        {content}
      </View>
    </PagerView>
  )
}

function Image({ value }) {
  const source = useMemo(() => {
    const i = value % 40
    return { uri: `https://unsplash.it/1200/1200?image=${i}` }
  }, [value])

  return (
    <FastImage
      style={styles.image}
      source={source}
      resizeMode={FastImage.resizeMode.cover}
    />
  )
}

const styles = StyleSheet.create({
  pagerView: {
    flex: 1,
  },
  image: {
    margin: 8,
    aspectRatio: 1,
    width: 400,
    height: 400
  }
});

export default App