import React, { Component } from 'react';
import { View, FlatList, Text, Image, Alert } from 'react-native';
class App extends Component {
  //create json array
  MyData=[
    {id:'1',title:"Bangladesh", subtitle:"Sakib", img:"https://cdn.pixabay.com/photo/2023/05/15/09/18/iceberg-7994536_1280.jpg"},
    {id:'2',title:"Australia", subtitle:"Smith", img:"https://cdn.pixabay.com/photo/2023/03/17/02/42/architecture-7857832_1280.jpg"},
    {id:'3',title:"England", subtitle:"Anderson", img:"https://media.istockphoto.com/id/1172437911/photo/budapest-hungary-the-main-tower-of-the-famous-fishermans-bastion-from-above.jpg?s=1024x1024&w=is&k=20&c=WDvMoCZDycINy23u9r31noMQU28nZz_kBP27_vvEKOo="},
    {id:'4',title:"India", subtitle:"Kohli",img:"https://media.istockphoto.com/id/1172437974/photo/budapest-hungary-aerial-view-of-the-main-tower-of-fishermans-bastion-with-illuminated.jpg?s=1024x1024&w=is&k=20&c=Kn5Jz6qaUwT_qBwwf5Ljq-bPOAf4je7uS-CWfUIC5Hc="},
    {id:'5',title:"Pakistan", subtitle:"RIzwan",img:"https://media.istockphoto.com/id/1285333630/photo/turkey-aerial-drone-high-point-view.jpg?s=1024x1024&w=is&k=20&c=JXt3dk3JO-ysRwCTdPLAOYNvHE0EYGSmvwom4Nok5-E="},
    {id:'6',title:"New-zealand", subtitle:"Boult",img:"https://cdn.pixabay.com/photo/2023/06/28/20/15/spider-8095142_1280.jpg"},
    {id:'7',title:"South Africa", subtitle:"De kock",img:"https://cdn.pixabay.com/photo/2023/06/11/08/52/waves-8055488_1280.jpg"},
    {id:'8',title:"Zimbabwe", subtitle:"Raza",img:"https://cdn.pixabay.com/photo/2023/06/28/09/12/waterfalls-8093877_1280.jpg"},
    {id:'9',title:"Ireland", subtitle:"Campher",img:"https://cdn.pixabay.com/photo/2023/06/01/05/58/clouds-8032705_1280.jpg"},
    {id:'10',title:"Afghanistan", subtitle:"Rashid",img:"https://cdn.pixabay.com/photo/2023/06/02/17/28/nature-8036126_1280.png"},
    {id:'11',title:"England", subtitle:"Root",img:"https://cdn.pixabay.com/photo/2023/06/28/20/15/spider-8095142_1280.jpg"},
    {id:'12',title:"Bangladesh", subtitle:"Hasan",img:"https://cdn.pixabay.com/photo/2023/03/17/02/42/architecture-7857832_1280.jpg"},
    {id:'13',title:"Ireland", subtitle:"Tector",img:"https://cdn.pixabay.com/photo/2023/06/28/11/25/man-8094211_1280.jpg"},
    {id:'14',title:"England", subtitle:"Butler",img:"https://cdn.pixabay.com/photo/2023/06/15/13/50/coffee-machine-8065457_1280.jpg"},
    {id:'15',title:"Bangladesh", subtitle:"Towhid",img:"https://cdn.pixabay.com/photo/2023/07/04/07/25/self-consciousness-8105584_1280.jpg"},
  ];

  //clickable function
    onClickItem=(alertTitle)=>{
      Alert.alert(alertTitle)
    }
  childView=({ctitle, csubtitle, img})=>{
    return(
    /* vertical  
    <View style={{flexDirection:'row',backgroundColor:'#fffeed',margin:5, padding:10, flex:100}}>
        <View style={{flex: 30}}>
            <Image style={{height:50, width:60}} source={{uri:img}} />
        </View>

        <View style={{flex: 70, backgroundColor:'#fffdee',}}>
          <Text style={{color:'#123eed',fontSize:16}}>{ctitle}</Text>
          <Text style={{color:'#23112f',fontSize:16}}>{csubtitle}</Text>
        </View>

      </View>*/

    /*horizontql       
    <View style={{flexDirection:'column',width:120,height:180,backgroundColor:'#fabcdf',margin:5, padding:10,}}>
        <View >
            <Image style={{height:120, width:"100%"}} source={{uri:img}} />
        </View>

        <View style={{ backgroundColor:'#fabcde',}}>
          <Text style={{color:'#123eed',fontSize:16}}>{ctitle}</Text>
          <Text style={{color:'#23112f',fontSize:16}}>{csubtitle}</Text>
        </View>

      </View>
     */
    //grid view
      <View style={{flexDirection:'column',width:120,height:180,backgroundColor:'#fabcdf',margin:5, padding:10,}}>
      <View >
          <Image style={{height:120, width:"100%"}} source={{uri:img}} />
      </View>

      <View style={{ backgroundColor:'#fabcde',}}>
        <Text onPress={this.onClickItem.bind(this,ctitle)} style={{color:'#123eed',fontSize:16}}>{ctitle}</Text>
        <Text style={{color:'#23112f',fontSize:16}}>{csubtitle}</Text>
      </View>

    </View>
    )
  }
  render() {
    return (
    //   <FlatList horizontal={true} data={this.MyData} renderItem={({item}) => <this.childView ctitle={item.title} csubtitle={item.subtitle} img={item.img}/>}/>
    <FlatList numColumns={3} horizontal={false} data={this.MyData} renderItem={({item}) => <this.childView ctitle={item.title} csubtitle={item.subtitle} img={item.img}/>}/>
    );
  }
}

export default App;