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

export default class RoomInput extends Component {
  constructor(props) {
    super(props);
    this.join = this.props.join;;

  }
  state = {
    modalVisible: false,
    gameText: "",
    userText: ""
  };

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

  render() {
    return (
      <View>
        <Modal
            visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}
          style={styles.modal}>
            <View>
              <Text>Enter Game ID:</Text>
              <TextInput
                style={styles.textInput}
                placeholder="Username"
                onChangeText={(text) => this.setState({userText: text})}
              />
              <TextInput
                style={styles.textInput}
                placeholder="Game No."
                onChangeText={(texta) => this.setState({gameText: texta})}
              />
              

              <TouchableHighlight
                onPress={() => {
                  this.join(this.state.userText, this.state.gameText);
                  this.setModalVisible(!this.state.modalVisible)
                }}>
                <Text>Join</Text>
              </TouchableHighlight>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Cancel</Text>
              </TouchableHighlight>

            </View>
        </Modal>       
      </View>
    );
  }
}
const styles = StyleSheet.create({
  modal: {
    backgroundColor: 'white',
    margin: 15, 
    alignItems: undefined,
    justifyContent: undefined,
  }
})