import React, {useState, useRef} from 'react';
import {
  StyleSheet,
  View,
  FlatList,
  Image,
  Alert,
  Pressable,
  Button,
  Modal,
  TextInput,
  Keyboard,
  useWindowDimensions,
} from 'react-native';

const App = () => {
  const imageUri =
    'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA==&auto=format&fit=crop&w=870&q=80';
  const images = Array.from({length: 13}, (_, i) => ({
    uri: imageUri,
    key: i.toString(),
  }));
  const [modalVisible, setModalVisible] = useState(false);
  const [indexInput, setIndexInput] = useState('');
  const flatListRef = useRef(null);
  const {width} = useWindowDimensions();

  const handleImageSelection = index => {
    Alert.alert(`You have selected image ${index + 1}`); // Display 1-indexed for user clarity
  };

  const handleScrollToIndex = () => {
    const index = parseInt(indexInput, 10) - 1; // Convert to 0-indexed
    if (!isNaN(index) && index >= 0 && index < images.length) {
      flatListRef.current?.scrollToIndex({animated: true, index});
    } else {
      Alert.alert&#40;
        'Invalid Index',
        `Please enter a number between 1 and ${images.length}`,
      &#41;;
    }
    setModalVisible(false);
    setIndexInput('');
    Keyboard.dismiss(); // Hide keyboard after submission
  };
  const getItemLayout = (data, index) => ({
    length: 100,
    offset: 100 * index,
    index,
  }); // assuming each item is 100px high

  const onScrollToIndexFailed = info => {
    const wait = new Promise(resolve => setTimeout(resolve, 500));
    wait.then(() => {
      flatListRef.current?.scrollToIndex({index: info.index, animated: true});
    });
  };
  return (
    <View  {width}]}>
      <Button title="Scroll to Image"  => setModalVisible(true)} />

      <Modal visible={modalVisible} animati transparent>
        <View >
          <View >
            <TextInput
               
               
              value={indexInput}
              keyboardType="numeric"
              placeholder={`Image number (1-${images.length})`}
            />
            <Button  title="Go" />
            <Button  => setModalVisible(false)} title="Cancel" />
          </View>
        </View>
      </Modal>

      <FlatList
        ref={flatListRef}
        data={images}
        getItemLayout={getItemLayout}
         
        renderItem={({item, index}) => (
          <Pressable  => handleImageSelection(index)}>
            <Image
              source={item}
               
                => Alert.alert&#40;'Error', 'Failed to load image'&#41;}
            />
          </Pressable>
        )}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  image: {
    width: 100,
    height: 100,
  },
});

export default App;