import React, { Component } from "react";
import {
  Container,
  Header,
  Content,
  Form,
  Item,
  Input,
  Label
} from "native-base";
import { TextInput, Button } from "react-native";
import { auth, db } from "../firebaseconfig";

export default class FloatingLabelExample extends Component {
  state = {
    username: "",
    password: "",
    passwordConfirm: "",
    error: "",
    authUser: {}
  };

  onUChange = e => {
    console.log("HERE");
    console.log(e);
    this.setState(
      {
        username: e
      },
      () => {}
    );
    console.log(this.state);
  };

  onPChange = e => {
    console.log("HERE");
    console.log(e);
    this.setState(
      {
        password: e
      },
      () => {}
    );
    console.log(this.state);
  };

  onPCChange = e => {
    console.log("HERE");
    console.log(e);
    this.setState(
      {
        passwordConfirm: e
      },
      () => {}
    );
    console.log(this.state);
  };

  handleSubmit1 = () => {
    console.log(this.props);
  };
  handleSubmit = navigation => {
    const { username, password, passwordConfirm, error } = this.state;

    auth
      .createUserWithEmailAndPassword(username, password)
      .then(res => res.json())
      .then(r =>
        this.setState(
          {
            authUser: r
          },
          () => {}
        )
      )
      .catch(e => {
        this.setState({
          error: e.message
        });
      });

    this.props.navigation.navigate("Details", this.state.authUser);
  };

  render() {
    const { username, password, passwordConfirm, error } = this.state;

    const isInvalid =
      username == "" ||
      password == "" ||
      password.length == 0 ||
      password != passwordConfirm;

    console.log(this.props);

    return (
      <Form>
        <TextInput
          style={{ height: 40 }}
          placeholder="Username"
          name="username"
          onChangeText={this.onUChange}
        />

        <TextInput
          style={{ height: 40 }}
          placeholder="Password"
          name="password"
          onChangeText={this.onPChange}
        />

        <TextInput
          style={{ height: 40 }}
          placeholder="Confirm Password"
          name="passwordConfirm"
          onChangeText={this.onPCChange}
        />

        <Button
          onPress={this.handleSubmit}
          title="Submit"
          disabled={isInvalid}
        />
      </Form>
    );
  }
}