<template>
  <div id="studentRegister" class="login_page fill-height">
    <v-container fluid fill-height>
      <v-layout align-center justify-center>
        <v-flex xs11 sm8 md5 lg4 xl3>
          <v-card>
            <v-progress-linear height="4" class="animated fadeIn" :indeterminate="true" color="orange" v-if="login"></v-progress-linear>
            <v-form @submit.stop.prevent="submit" class="animated fadeIn pa-3">
              <v-layout row wrap class="my-4 align-center">
                <v-flex class="xs3 align-content-start">
                  <v-btn flat icon @click="$router.push('/')">
                    <v-icon>arrow_back</v-icon>
                  </v-btn>
                </v-flex>
                <v-flex class="xs9 align-start">
                  <legend class="title">Welcome to IIB</legend>
                </v-flex>
              </v-layout>
            </v-form>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
    <div v-if="!checkName">
      <v-form @submit.stop.prevent="submit">
        <legend>Welcome to IIB</legend><br>
        <div v-if="!checkName">
          <span class="redText" v-if="idCheck">Please check your Student ID.</span>
          <span class="greenText" v-if="idCheckCount">Fill in your ID.</span>
          <md-input-container md-theme="green">
            <md-icon>account_circle</md-icon>
            <label>Student Id</label>
            <md-input placeholder="Student Id" v-model="id" maxlength="6" type="number" required></md-input>
          </md-input-container>
          <span class="redText" v-if="dateCheckSpan">Please check your date.</span>
          <md-input-container md-theme="green">
            <md-icon>date_range</md-icon>
            <label>Date of Birth</label>
            <md-input maxlength="10" minlength="10" placeholder="DD/MM/YYYY" onkeyup="this.value=this.value.replace(/^(\d\d)()$/g,'$1/$2').replace(/^(\d\d\/\d\d)()$/g,'$1/$2').replace(/[^\d\/]/g,'')" v-model="dob" required></md-input>
          </md-input-container>
          <md-button class="md-raised md-primary " md-theme="green" type="submit">Register</md-button><br>
        </div>
      </v-form>
    </div>
    <form v-if="checkName" @submit.stop.prevent="submitUsernameAndPass">
      <div>
        <span class="md-body-1">Welcome</span>
        <span class="md-body-2 greenText"><br> {{ name }}</span><br>
        <md-input-container md-theme="green">
          <md-icon>&#xE8E8;
            <md-tooltip class="md-body-1">Choose a unique username.</md-tooltip>
          </md-icon>
          <label>Username</label>
          <md-input v-on:blur.native="checkUsername" placeholder="Username" minlength="4" v-model="username" required maxlength="15"></md-input>
          <md-icon md-theme="green" v-if="usernameCheck">&#xE877;</md-icon>
        </md-input-container>
        <span class="greenText" v-show="userNameCount">Atleast choose 4 characters.</span>
        <span class="redText" v-show="userNameTaken">This username is already taken. Please try another one</span>
        <span class="greenText" v-show="userNameAvailable">Username is available.</span>
        <md-input-container md-has-password md-theme="green" required>
          <label>Password</label>
          <md-icon md-theme="green" v-if="passMatch">&#xE877;</md-icon>
          <md-input placeholder="Password" type="password" v-model="password" required minlength="4"></md-input>
        </md-input-container>
        <span class="redText" v-show="passCount">Password must be atleast 4 character long.</span>
        <md-input-container md-theme="green">
          <label>Confirm Password</label>
          <md-icon md-theme="green" v-if="passMatch">&#xE877;</md-icon>
          <md-input placeholder="Confirm Password" v-model="passwordTwo" type="password" minlength="4"></md-input>
        </md-input-container>
        <span class="redText" v-show="passNotMatch">Password do not match.</span>
        <span class="greenText" v-show="passMatch">Password match. Now click on register.</span><br>
        <md-button class="md-primary md-raised" md-theme="green" type="submit">Register</md-button>
      </div>
    </form>

  </div>
  </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  name: "studentRegister",
  data() {
    return {
      id: "",
      dob: "",
      name: "",
      username: "",
      password: "",
      passwordTwo: "",
      passCount: false,
      passMatch: false,
      passNotMatch: false,
      checkName: false,
      usernameCheck: false,
      idCheck: false,
      idCheckCount: false,
      dateCheckSpan: false,
      userNameTaken: false,
      userNameCount: false,
      userNameAvailable: false
    };
  },
  watch: {
    username: function() {
      this.username = this.username.replace(/\s+/g, "-").toLowerCase();
      if (this.username.length == 1 || this.username.length < 4) {
        this.userNameCount = true;
        this.userNameAvailable = false;
      } else {
        this.userNameCount = false;
      }
    },
    password: function() {
      if (
        this.password.length == 1 ||
        (this.password.length < 4 && this.password === this.passwordTwo)
      ) {
        this.passCount = true;
        this.passMatch = true;
      } else if (this.password.length > 1) {
        this.passCount = false;
        this.passMatch = false;
        this.passNotMatch = true;
      }
    },
    passwordTwo: function() {
      if (this.password === this.passwordTwo) {
        this.passMatch = true;
        this.passNotMatch = false;
      } else if (this.password !== this.passwordTwo) {
        this.passMatch = false;
        this.passNotMatch = true;
      } else {
        this.passMatch = false;
        this.passNotMatch = false;
      }
    },
    dob: function() {
      if (this.dob.length > 9) {
        let dateCheck = moment(this.dob, "DD/MM/YYYY", true).isValid();
        if (dateCheck == false) {
          this.dateCheckSpan = true;
        } else {
          this.dateCheckSpan = false;
        }
      }
    },
    id: function() {
      if (this.id.length > 0 && this.id.length < 5) {
        this.idCheckCount = true;
        this.idcheck = false;
      } else if (this.id.length > 6) {
        this.idCheckCount = false;
        this.idCheck = true;
      } else if (this.id.length == 6) {
        this.idCheckCount = false;
        this.idCheck = false;
      }
    }
  },
  methods: {
    submit() {
      const self = this;
      if (this.dateCheckSpan == true) {
        this.swalDateCheck();
      } else if (this.idCheck == true || this.idCheckCount == true) {
        this.swalIdCheck();
      } else {
        axios
          .post("http://localhost:3000/student/getname", {
            id: this.id,
            dob: this.dob
          })
          .then(response => {
            if (response.data.success) {
              self.checkName = true;
              self.name = response.data.name;
            } else {
              self.swalWrongIdOrDob();
              this.id = " ";
              this.dob = "";
            }
          })
          .catch(error => self.swalSE());
      }
    },
    checkUsername() {
      const self = this;
      let usernameLength = this.username.length;
      if (usernameLength > 3) {
        axios
          .post("http://localhost:3000/student/checkusername", {
            username: this.username
          })
          .then(response => {
            let usernameCheckResponse = response.data.success;
            if (usernameCheckResponse == true) {
              self.usernameCheck = false;
              self.userNameTaken = true;
              self.userNameAvailable = false;
            } else if (usernameCheckResponse == false) {
              self.usernameCheck = true;
              self.userNameAvailable = true;
              self.userNameTaken = false;
            }
          })
          .catch(error => console.log(error));
      }
    },
    submitUsernameAndPass() {
      const self = this;
      if (
        this.passMatch == true &&
        this.usernameCheck == true &&
        this.userNameTaken == false &&
        this.userNameAvailable == true
      ) {
        axios
          .post("http://localhost:3000/student/saveusernameandpassword", {
            id: this.id,
            username: this.username,
            password: this.password
          })
          .then(response => {
            if (response.data.success) {
              self.swalS();
              self.$router.push("/login");
            } else {
              self.swalE();
            }
          })
          .catch(error => console.log(error));
      } else if (this.userNameAvailable == false) {
        this.swalUsername();
      } else if (this.passMatch == false) {
        this.swalPassword();
      }
    },
    swalS() {
      this.$swal("Hurray...", "You can now log in!!!", "success");
    },
    swalE() {
      this.$swal(
        "Sorry...",
        "But something was wrong with your data.",
        "error"
      );
    },
    swalSE() {
      this.$swal(
        "Server not responding",
        "Looks like server is not responding. Please call on +91 7030616809",
        "error"
      );
    },
    swalUsername() {
      this.$swal(
        "Sorry...",
        "Looks like Somebody else got that name. Please use another username.",
        "info"
      );
    },
    swalPassword() {
      this.$swal("Sorry...", "Your password do not match.", "info");
    },
    swalWrongIdOrDob() {
      this.$swal(
        "Sorry...",
        "Looks like you have already registered or your Student ID and DOB don't match.",
        "info"
      );
    },
    swalDateCheck() {
      this.$swal(
        "Date...",
        "Your date don't match with our Calendar.",
        "error"
      );
    },
    swalIdCheck() {
      this.$swal(
        "Student ID...",
        "Looks like there is a problem with your ID.",
        "info"
      );
    }
  }
};
</script>