import React,{useCallback, useState} from "react";
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
StatusBar,
ScrollView,
Image,
TouchableOpacity,
Modal,
ImageBackground,
Button
} from "react-native";
import { Rating, AirbnbRating } from "react-native-ratings";
import POST from "./POST";
const Data = () => {
const [post, setPost]=useState(POST)
const [isRender, setIsRender] = useState(true)
const [isModalVisible, setisModalVisible]=useState(false)
const keyExtractor = useCallback(item => item.id.toString())
const Item = ({ title, img, author }) => (
<TouchableOpacity onPress={()=>onPressItem(Item)}>
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
<Text style={styles.author}>{author}</Text>
<Image
style={{ left: 4, width: 71, height: 107, bottom: '55%', }}
source={img}
/>
<View style={styles.rating}>
<Rating count={5} defaultRating={4} imageSize={16} />
</View>
</View>
</TouchableOpacity>
);
const renderItem = useCallback(({ item }) => (
<Item title={item.title} img={item.img} author={item.author} />
));
const onPressItem=(item)=>{
setisModalVisible(true)
}
const onPressNoItem=(item)=>{
setisModalVisible(false)
}
const Modals=({title, img, author})=>(
<View style={styles.container1}>
<ImageBackground source={require('./img/el4.png')} style={styles.img} >
<Text style={styles.text}>Книга</Text>
<View style={{flex:1, top:140, left:50}}>
<TouchableOpacity onPress={()=>onPressNoItem(Item)}>
<Image source={require('./img/strel.png')}/>
</TouchableOpacity>
</View>
</ImageBackground>
<Text style={styles.textModal}>{title}</Text>
<Text style={styles.author}>{author}</Text>
</View>
)
return (
<SafeAreaView style={styles.container}>
<FlatList
data={post}
renderItem={renderItem}
keyExtractor={keyExtractor}
extraData={isRender}
/>
<Modal
animationType="fade"
visible={isModalVisible}
onRequestClose={()=>setisModalVisible(false)}
presentationStyle='fullScreen'
>
<Modals/>
</Modal>
</SafeAreaView>
);
};