import React from "react";
import { View, Text, Button, TextInput } from "react-native";

export class RegisterForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      errorMsg: "",
      username: "",
      password: "",
      password2: "",
      registered: false
    };

    //this.handleRegister = this.handleRegister.bind(this);
  }

  // shows error messages associated with registering
  handleError = error => {
    this.setState({ errorMsg: error });
  };

  // updates state with input values
  handleChange = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  // show/hide this form
  handleView = e => {
    this.props.toggleView(this.props.view);
  };

  handleRegister = e => {
    const name = this.state.username;
    const password = this.state.password;
    if (this.state.password !== this.state.password2) {
      this.handleError("Passwords do not match");
    } else {
      // Send register info to the server
      fetch(`http://172.20.2.110:5000/user/register`, {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          name: name,
          password: password
        })
      })
        .then(res => res.json())
        .then(
          result => {
            if (result.name) {
              this.props.handleState(result);
              this.handleView();
            } else {
              this.handleError(result.message);
            }
          },
          // Note: it's important to handle errors here
          // instead of a catch() block so that we don't swallow
          // exceptions from actual bugs in components.
          error => {
            console.log(error);
          }
        );
    }
  };

  render() {
    return (
      <View className="fade-main">
        <View className="sticky">
          <Text className="close" onPress={this.handleView}>
            ×
          </Text>
        </View>
        <View className="login">
          <Text>Register New User</Text>
          <TextInput
            placeholder="Enter Username"
            value={this.state.username}
            onChangeText={username => this.setState({ username })}
            autoFocus
            required
          />
          <TextInput
            placeholder="Enter password"
            secureTextEntry={true}
            value={this.state.password}
            onChangeText={password => this.setState({ password })}
            required
          />
          <TextInput
            placeholder="Verify password"
            secureTextEntry={true}
            value={this.state.password2}
            onChangeText={password2 => this.setState({ password2 })}
            required
          />
          <Button title="Submit" onPress={this.handleRegister} />
          <Text>{this.state.errorMsg}</Text>
        </View>
      </View>
    );
  }
}

export default RegisterForm;