import React from 'react';
import {
  View,
  TouchableWithoutFeedback,
  TouchableHighlight,
  Text,
  Image,
  Modal,
  StyleSheet,
  Dimensions
} from 'react-native';

const { height, width } = Dimensions.get('window');
const MODAL_HEIGHT = height/3;

export default class Respostas extends React.Component {
  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
    return (
      <View style={styles.container}>
        <Modal
          animationType="fade"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            this.setModalVisible(false);
          }}>
          <TouchableWithoutFeedback
            onPress={() => {
              this.setModalVisible(false);
            }}>
            <View style={styles.modalstyle}>
              <View style={styles.modalcontent}>
                <Text style={styles.title}>Parabéns!</Text>
                <Text style={styles.body}>Cadastro realizado com sucesso</Text>
                <TouchableHighlight
                  style={styles.btnyes}
                  underlayColor="#D6F22C"
                  onPress={() => {
                    this.setModalVisible(!this.state.modalVisible);
                  }}>
                  <Text
                    style={{
                      color: 'white',
                      fontSize: 14,
                      fontWeight: 'bold',
                    }}>
                    Concluir
                  </Text>
                </TouchableHighlight>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </Modal>

        <TouchableHighlight
          style={styles.button}
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
  },
  modalstyle: {
    position: 'absolute',
    transform: [{translateY: (height/2)-(MODAL_HEIGHT/2)}],
    alignSelf: 'center',
    height: 300,
    backgroundColor: 'grey'
  }
});