import React, { Component } from 'react';
import { Modal, View, Text, Button, TouchableOpacity, TouchableHighlight } from 'react-native';
import styles from './src/styles/styles';

export default class App extends React.Component{

	state = {
		modalYesVisible: false,
		modalNoVisible: false,
	}

	setModalYesVisible(visible){
		this.setState({modalYesVisible: visible});
	}

	setModalNoVisible(visible){
		this.setState({modalNoVisible: visible})
	}
	

	render(){
		return(

			<View style={styles.container}>

				<Modal
					animationType="slide"
					visible={this.state.modalYesVisible}
					onRequestClose={() => {}}
				>
					<TouchableHighlight
						style={styles.buttonYes}
						onPress={() => {this.setModalYesVisible(!this.state.modalYesVisible)}}
					>
						<View style={styles.buttonYes}>
						<Text style={styles.textButton}>SIM</Text>
						</View>
					</TouchableHighlight>
				</Modal>




				<Modal
					animationType="slide"
					visible={this.state.modalNoVisible}
					onRequestClose={() => {}}
				>
					<TouchableHighlight
						style={styles.buttonNo}
						onPress={() => {this.setModalNoVisible(!this.state.modalNoVisible)}}
					>
						<View style={styles.buttonNo}>
						<Text style={styles.textButton}>NÃO</Text>
						</View>
					</TouchableHighlight>
				</Modal>




				<TouchableOpacity
					style={styles.buttonYes}
					onPress={() => {
						this.setModalYesVisible(!this.state.modalYesVisible)
					}}
				>
				<Text style={styles.textButton}>SIM</Text>
				</TouchableOpacity>



				<TouchableOpacity
					style={styles.buttonNo}
					onPress={() => {
						this.setModalNoVisible(!this.state.modalNoVisible)
					}}
				>
					<Text style={styles.textButton}>NÃO</Text>
				</TouchableOpacity>
			</View>
			
		);
	}
}