/**

 * Copyright (c) 2024 Huawei Technologies Co., Ltd.

 *

 * This source code is licensed under the MIT license found in the

 * LICENSE-MIT file in the root directory of this source tree.

 */



import React from 'react';

import {

  ScrollView,

  StyleSheet,

  Text,

  TouchableOpacity,

  View,

  VirtualizedList,

} from 'react-native';



export const NestedScrollingExample = () => {

  return (

    <ScrollView style={{ backgroundColor: 'yellow' }} bounces>

      <View style={styles.view1} />

      <View style={styles.view2} />

      <View style={styles.view1} />

      <VirtualizedList

        style={{ height: 400, backgroundColor: 'green', width: '50%' }}

        data={GENERATED_DATA}

        bounces

        getItem={(_, index: number) => GENERATED_DATA[index]}

        getItemCount={() => GENERATED_DATA.length}

        getItemLayout={(_, index: number) => ({

          length: 48,

          offset: 48 * index,

          index,

        })}

        inverted

        renderItem={({ item }: { item: ItemData }) => (

          <TouchableOpacity onPress={() => console.log(item.title)}>

            <Item title={item.title} />

          </TouchableOpacity>

        )}

        keyExtractor={(item: ItemData) => item.id}

      />

      <View style={styles.view1} />

      <View style={styles.view2} />

    </ScrollView>

  );

};



const GENERATED_DATA = Array.from({ length: 100 }, (_, index) => ({

  id: String(index),

  title: `Item ${index + 1}`,

}));

type ItemData = {

  id: string;

  title: string;

};



const Item = ({ title }: { title: string }) => (

  <View style={{ height: 48, padding: 16, borderBottomWidth: 1 }}>

    <Text style={{ width: '100%', height: 24 }}>{title}</Text>

  </View>

);



const styles = StyleSheet.create({

  view1: {

    width: '100%',

    height: 300,

    backgroundColor: 'red',

  },

  view2: {

    width: '100%',

    height: 300,

    backgroundColor: 'blue',

  },

});