import React, {Component} from 'react';
import {TextInput, StyleSheet, Text, View,TouchableOpacity} from 'react-native';

export default class App extends Component {
 
 constructor(props)
 {
   super(props)//Component clasının yapılandırıcısını çağrıyoruz.

   this.state={//runtime'de değiskenleri ve içindeki verileri saklıyor
    
     text_input_value:'',
     sayac:0,
     text_value:'',
   };
 this.normal_btn_click=this.normal_btn_click.bind(this);
 this.btn_text_degistir=this.btn_text_degistir.bind(this); 
}

btn_text_degistir()
{
  this.setState({text_value:this.state.text_input_value,text_input_value:''});
}
 normal_btn_click()
 {

  this.setState({sayac:++this.state.sayac});
 }

  render() {
    return (
      <View style={styles.main_view_style}>
        <View style={styles.view_1_style}>
        <Text style={styles.label_style} >{this.state.text_value}</Text>
        <TextInput placeholder='bir seyler giriniz..' 
        value={this.state.text_input_value}
        style={styles.textinput_style} 
        onChangeText={(value)=>{
         //isimsiz fonksiyon 
         this.setState({text_input_value:value});
         //state içinde ki değiskenleri this.setState fonksiyonu ile güncelliyoruz.
          }}>
        </TextInput>
        <TouchableOpacity style={styles.btn_goster_style} onPress={this.btn_text_degistir}>
        <Text style={styles.btn_goster_text_style}>Text'de Göster</Text>
        </TouchableOpacity>  
        
        </View>
   <View style={styles.view_2_style}>
   <TouchableOpacity style={styles.btn_normal_sayac_style} onPress={this.normal_btn_click}>
   <Text style={styles.btn_normal_sayac_text_style}>Normal Buton Arttır</Text>
   </TouchableOpacity>

   <TouchableOpacity style={styles.btn_arrow_sayac_style} onPress={()=>this.setState({sayac:++this.state.sayac})}>
   <Text style={styles.btn_arrow_sayac_text_style}>Arrow Buton Arttır</Text>
   </TouchableOpacity>
   <Text style={styles.label_style}>{this.state.sayac}</Text>
   </View>
   
      
      </View>
    );
  }
}

const styles = StyleSheet.create({
  main_view_style: {
    flex: 1,//ekranı kapla
    flexDirection:'column',//nesneler yukardan aşağı dizilecektir
       backgroundColor: 'white',
  },
  view_1_style:{
    flex:1,
    alignItems:'center'//yatayda ortala

  },
  view_2_style:{
    flex:1,
    flexDirection:'column',
    alignItems:'center'
  },
  btn_goster_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    backgroundColor:'red',
    borderRadius:10,
    marginTop:1,
  },btn_goster_text_style:{
    height:'100%',
    textAlign:'center',
    textAlignVertical:'center',
    color:'white', 
    
  },
  textinput_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    borderRadius:10,
    borderWidth:1,
    borderColor:'#e5e5e5',
    marginTop:1,
  },
  label_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    borderRadius:10,
    borderWidth:1,
    borderColor:'#e5e5e5',
    marginTop:1,
    textAlignVertical:'center',
    paddingLeft:2,
    color:'black'
  },
  btn_normal_sayac_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    backgroundColor:'#ffa959',
    borderRadius:10,
    marginTop:1,
  },
  btn_normal_sayac_text_style:{
    height:'100%',
    textAlign:'center',
    textAlignVertical:'center',
    color:'white',
  },btn_arrow_sayac_style:{
    height:35,
    width:'99%',
    marginLeft:1,
    marginRight:1,
    backgroundColor:'#75baff',
    borderRadius:10,
    marginTop:1,
  },
  btn_arrow_sayac_text_style:{
    height:'100%',
    textAlign:'center',
    textAlignVertical:'center',
    color:'white',
  },
});