/**
 * Copyright (c) 2025 Huawei Technologies Co., Ltd.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE 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,
        })}
        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: 20}, (_, 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',
  },
});