/**
 * Demostrate how the positioning of a fullscreen modal on Android tablet's can go wrong
 */

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

class ModalProblem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: false,
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
        <TouchableHighlight
          onPress={() => {
            this.setState({
              modal: true,
            });
          }}
        >
          <View style={{ backgroundColor: 'red', padding: 10, borderRadius: 2 }}>
            <Text style={{ color: 'white' }}>open modal</Text>
          </View>
        </TouchableHighlight>
        <Modal
          visible={this.state.modal}
          transparent
          onRequestClose={() => {
            this.setState({
              modal: false,
            });
          }}
        >
          <TouchableWithoutFeedback
            onPress={() => {
              this.setState({
                modal: false,
              });
            }}
          >
            {/* Full screen dark transparent modal */}
            <View style={{ backgroundColor: '#000', opacity: 0.7, left: 0, top: 0, right: 0, bottom: 0, position: 'absolute' }} />
          </TouchableWithoutFeedback>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('ModalProblem', () => ModalProblem);