import React, { Component } from "react";
import { View, StyleSheet, Text } from "react-native";

import ScreenConstants from "../../../models/navigation/ScreenConstants";
import IconTextField from "../../../components/textfields/IconTextField";
import BasicButton from "../../../components/buttons/BasicButton";

import User from "../../../models/user";

import NavigationBarView from "../../navigationBar/NavigationBarView";

import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

import Images from "../../../assets/images";
import Fonts from "../../../assets/fonts";
import Colors from "../../../assets/colors";
import { SimpleModalView, ModalViewType } from "../../modals/simpleModalView";

class SignUpDeveloperScreen extends Component {
  state = {
    isEditing: false,
    confirmPassword: __DEV__ ? "123456" : "",
    user: __DEV__
      ? User.create({
          firstName: "Adrian",
          lastName: "Piedra",
          email: "adrian@zipdev.co",
          password: "123456",
          role: "Developer"
        })
      : User.create({ role: "Developer" }),
    messageModal: {
      isVisible: false,
      message: ""
    }
  };

  onFocusHandler = () => {
    this.setState({
      isEditing: true
    });
  };

  onEndEditingHandler = () => {
    this.setState({
      isEditing: false
    });
  };

  signUpHandler = () => {
    const {
      firstName,
      lastName,
      password,
      phoneNumber,
      email
    } = this.state.user;

    const firstNameIsValid = firstName !== "";
    if (!firstNameIsValid) {
      alert("Please insert your first name.");
      return;
    }

    const passwordIsEqual = password === this.state.confirmPassword;
    if (!passwordIsEqual) {
      alert("Password does not match the confirm password.");
      return;
    }

    const passwordIsntLongEnough = password.length >= 6;
    if (!passwordIsntLongEnough) {
      alert("Password should have 6 characters or more.");
      return;
    }

    const isValidEmail = this.state.user.validateEmail();
    if (!isValidEmail) {
      alert("Please insert a valid email.");
      return;
    }

    this.state.user
      .signUp()
      .then(document => {
        this.setState({
          messageModal: {
            isVisible: true,
            message:
              "We have received your application. Check your email for a confirmation.",
            kindOfMessage: ModalViewType.SUCCESS_ALERT,
            buttons: [
              {
                text: "OK",
                onPress: () =>
                  this.setState({ messageModal: { isVisible: false } })
              }
            ]
          }
        });
      })
      .catch(error => {
        this.setState({
          messageModal: {
            isVisible: true,
            message: error.message,
            kindOfMessage: ModalViewType.ERROR_ALERT,
            buttons: [
              {
                text: "OK",
                onPress: () =>
                  this.setState({ messageModal: { isVisible: false } })
              }
            ]
          }
        });
      });
  };

  render() {
    return (
      <View style={styles.content}>
        <SimpleModalView
          isVisible={this.state.messageModal.isVisible}
          message={this.state.messageModal.message}
          kindOfMessage={this.state.messageModal.kindOfMessage}
          buttons={this.state.messageModal.buttons}
        />
        <NavigationBarView
          navigator={this.props.navigator}
          leftTitle="Create Developer Account"
        />
        <KeyboardAwareScrollView
          scrollEnabled={this.state.isEditing}
          resetScrollToCoords={{ x: 0, y: 0 }}
          contentContainerStyle={styles.scrollContainer}
          showsVerticalScrollIndicator={false}
        >
          <Text style={styles.title}>Basic Information</Text>
          <IconTextField
            style={[styles.textfield]}
            iconName="account-outline"
            textFieldProps={{
              clearButtonMode: "while-editing",
              placeholder: "First Name",
              value: this.state.user.firstName,
              onChangeText: val => {
                this.state.user.setFirstName(val);
              },
              onFocus: this.onFocusHandler,
              onEndEditing: this.onEndEditingHandler
            }}
          />
          <IconTextField
            style={[styles.textfield]}
            iconName="account-outline"
            textFieldProps={{
              clearButtonMode: "while-editing",
              placeholder: "Last Name",
              value: this.state.user.lastName,
              onChangeText: val => {
                this.state.user.setLastName(val);
              },
              onFocus: this.onFocusHandler,
              onEndEditing: this.onEndEditingHandler
            }}
          />
          <IconTextField
            style={[styles.textfield]}
            iconName="email-outline"
            textFieldProps={{
              clearButtonMode: "while-editing",
              placeholder: "E-mail",
              value: this.state.user.email,
              onChangeText: val => {
                this.state.user.setEmail(val);
              },
              keyboardType: "email-address",
              onFocus: this.onFocusHandler,
              onEndEditing: this.onEndEditingHandler
            }}
          />
          <IconTextField
            style={[styles.textfield]}
            iconName="phone"
            textFieldProps={{
              clearButtonMode: "while-editing",
              placeholder: "Phone Number",
              value: this.state.user.phoneNumber,
              onChangeText: val => {
                this.state.user.setPhone(val);
              },
              keyboardType: "numeric",
              onFocus: this.onFocusHandler,
              onEndEditing: this.onEndEditingHandler
            }}
          />
          <IconTextField
            style={[styles.textfield]}
            iconName="lock-outline"
            textFieldProps={{
              clearButtonMode: "while-editing",
              placeholder: "Password",
              value: this.state.user.password,
              onChangeText: val => {
                this.state.user.setPassword(val);
              },
              secureTextEntry: true,
              onFocus: this.onFocusHandler,
              onEndEditing: this.onEndEditingHandler
            }}
          />
          <IconTextField
            style={[styles.textfield]}
            iconName="lock-outline"
            textFieldProps={{
              clearButtonMode: "while-editing",
              placeholder: "Confirm Password",
              value: this.state.user.password,
              onChangeText: val => {
                this.setState({ confirmPassword: val });
              },
              onFocus: this.onFocusHandler,
              secureTextEntry: true,
              onEndEditing: this.onEndEditingHandler
            }}
          />
        </KeyboardAwareScrollView>
        <View style={styles.buttonContainer}>
          <BasicButton onPress={this.signUpHandler} style={styles.button}>
            Confirm
          </BasicButton>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    backgroundColor: Colors.PURPLE_BROWN,
    flex: 1
  },
  scrollContainer: {
    flex: 1,
    alignItems: "center"
  },
  title: {
    textAlign: "left",
    color: Colors.WHITE_TEXT,
    fontFamily: Fonts.robotoLight,
    width: "70%",
    marginTop: 10
  },
  textfield: {
    width: "70%",
    height: 40,
    marginTop: 15
  },
  buttonContainer: {
    alignItems: "center"
  },
  button: {
    width: "70%",
    height: 40,
    marginBottom: 15
  }
});

export default SignUpDeveloperScreen;