<link rel="import" href="form-field.html">

<polymer-element name="core-own-signin">

<template>
  <style>
    :host {
      width: 100%;
      height: auto;
    }

    #send {
      margin-left: auto;
      margin-right: auto;
      display: block;
      background-color: rgb(137, 191, 79);
    }
  </style>

  <div>
    <form-field
      id="username"
      label="Username"
      icon="account-circle"
      errorMsg="Please write a valid username"
      checkInDB="true"
      regexp=".{3,}"
    ></form-field>
    <form-field
      id="email"
      type="email"
      label="E-mail address"
      icon="mail"
      errorMsg="Should be a valid email address"
      checkInDB="true"
      regexp="[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}"
    ></form-field>
    <form-field
      id="name"
      label="Your name"
      icon="account-circle"
      errorMsg="Please write a name"
      regexp=".{3,}"
    ></form-field>
    <form-field
      id="password"
      type="password"
      label="Choose password"
      icon="lock"
      errorMsg="Password must contain 6 to 16 characters, and it must include uppercase, lowercase and numbers"
      on-blur="{{checkPassword}}"
      regexp="^(?=.+\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z]{6,16}$"
    ></form-field>
    <form-field
      id="password2"
      type="password"
      label="Re-enter password"
      icon="lock"
      errorMsg="Must be the same password"
      on-blur="{{checkPassword}}"
    ></form-field>
    <form-field
      id="bdate"
      label="Birth date"
      icon="redeem"
      on-keydown="{{keydown}}"
      errorMsg="Fill in a valid date. (dd-mm-yy)"
      regexp="^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-](19|20)?\d{2}$"
    ></form-field>
  </div>
  <paper-fab disabled on-click="{{startProgress}}" id="send" icon="arrow-forward" title="submit"></paper-fab>

</template>

<script>
  Polymer({
    ready: function() {
        this.addEventListener('blur', this.validateAll);
    },
    checkPassword: function(){
      if (this.$.password2.$.input.value) {
        if (this.$.password.$.input.value === this.$.password2.$.input.value) {
          this.$.password2.$.icon.className = "green";
          this.$.password2.error.visible = false;
          return true;
        } else {
          this.$.password2.$.icon.className = "red";
          this.$.password2.error.visible = true;
          return false;
        }
      } else {
        this.$.password2.$.icon.className = "";
      }
    },
    validateAll: function() {
      var fields = this.shadowRoot.getElementsByTagName('form-field');
      var isValid = true;
      var that = this;

      for(var i=0; i<fields.length; i++) {
        /* A field is not valid if:
         * 1) The data introduced is incorrect (mainly because there is a non-empty pattern and the data does not fit it)... OR
         * 2) The data introduced is already in the database.
         */

        if ((fields[i].$.input.pattern && !fields[i].$.input.validity.valid) || fields[i].error.inDB) {
          isValid = false;
        }
      }

      if (isValid) {
        that.$.send.removeAttribute("disabled");
      } else {
        that.$.send.setAttribute( "disabled", '');
      }
    },
    keydown: function(event, detail, sender) {
      if(event.keyCode === 13) {
        this.validateAll();
      }
    },
    startProgress: function(){
      var datos = {
        username: this.$.username.$.field.input.value,
        name: this.$.name.$.field.input.value,
        mail: this.$.email.$.field.input.value,
        bdate: this.$.bdate.$.field.input.value,
        password: this.$.password.$.field.input.value,
      }
      datos.type = "create";
      console.log('own signin');
      console.log(datos);
      this.fire('login', JSON.stringify(datos));
    }
  });

</script>

</polymer-element>
