<template>
  <main id="main">
    <section id="intro">
      <div class="form">
        <div class="row justify-content-center">
          <div class="col-md-8">
            <div class="intro-content">
              <div class="col-10 mx-auto">
                <div class="card card-signin my-5">
                  <div class="card-body">
                    <h3 class="card-title text-center">Login</h3>

                    <alert :text="errorMessage" :type="errorOccurred" />

                    <div v-if="page">
                      <alert :text="page.text" :type="'INFO'" />
                    </div>
                      <div class="form-label-group">
                        <float-label label="Username" style="width: 100%">
                        <input
                        type="text"
                        id="inputUsername"
                        name="username"
                        class="form-control uniInput"
                        v-model="username"
                        v-bind:class="{'is-valid': username,
                         'is-invalid': !requiredField(username) && usernameLoad}"
                        v-on:keyup="usernameLoad = true"
                        v-on:blur="usernameLoad = true"
                        placeholder="Username"
                        required
                        icon
                        autofocus
                        />
                      <div class="invalid-feedback">Name is required!</div>
                      </float-label>
                      </div>

                    <div class="form-label-group">
                      <float-label label="Password" style="width: 100%">
                      <input
                        type="password"
                        id="inputPassword"
                        name="password"
                        class="form-control uniInput"
                        placeholder="Password"
                        v-model="password"
                        v-bind:class="{'is-valid': password,
                         'is-invalid': !requiredField(password) && passwordLoad}"
                        v-on:keyup="passwordLoad = true"
                        v-on:blur="passwordLoad = true"
                        aria-required="icon"
                        required
                        icon
                      />
                      <div class="invalid-feedback">Password is required!</div>
                      </float-label>
                    </div>

                    <div class="custom-control custom-checkbox mb-3">
                      <input type="checkbox" class="custom-control-input" id="customCheck1" />
                      <label class="custom-control-label" for="customCheck1"
                        >Remember password?</label
                      >
                    </div>
                    <button v-on:click="Login()" class="btn-white-border" type="submit">
                    <!-- <button class="btn-solid-blue" type="submit"> -->
                      LOGIN
                    </button>
                    <router-link style="float:right" to="/user/forgotPassword"
                      >Forgot Password?</router-link
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <carousel
        :nav="false"
        :dots="false"
        :items="1"
        :autoplay="true"
        :loop="true"
        id="intro-carousel"
        style="margin-top:-50px"
        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
      >
        <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-2.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-3.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-4.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
        <img class="item" src="/img/intro-carousel/home-6.jpg" alt="" />
      </carousel>
    </section>
  </main>
</template>

<script>
/* eslint-disable */
import { mapActions, mapState } from "vuex";
import uuid from "uuid";
import alert from "../shared/alert.vue";
import Log from "../../assets/Log";
import carousel from "vue-owl-carousel";
export default {
  name: "Login",
  components: {
    carousel,
    alert
  },
  props: {
    page: {}
  },
  data() {
    return {
      username: "",
      usernameLoad: false,
      password: "",
      passwordLoad: false,
      errorOccurred: "",
      errorMessage: "",
      isPasswordShown: "password",
      selectItems: [{ text: "password", value: 0 }],
      selectErrors: "Some error with the field",
      select: null,
      textErrors: "Some error with the field",
      text: "",
      showPassword: false,
      email: "",
      troubleToggle: false,
      error: false
    };
  },
  computed: {
    ...mapState("authentication", ["token", "status"])
  },
  mounted() {
    this.checkUserStatus();
  },
  methods: {
    ...mapActions("authentication", ["login", "init", "logout"]),
    ToggleTrouble() {
      if (this.troubleToggle) {
        this.troubleToggle = false;
      } else this.troubleToggle = true;
    },
    Login() {
      //console.log(this.username + " " + this.password);
      if (this.validate()){
      this.login({ username: this.username, password: this.password })
        .then(() => {
          //console.log(Log.getUser());
          if (!this.page) {
            if (!Log.getUser().loginPasswordChange) {
              this.$router.push("/");
            } else {
              this.$router.push("/user/changePasswordOnLogin");
            }
          } else {
            this.$router.push(this.page.pageRedirect);
          }
        })
        .catch(err => {
          //console.log("Catch here");
          //console.log(this.status);
          this.errorOccurred = "ERROR";
          this.errorMessage = "Server Error: CONNECTION_REFUSED"; 
          console.log(err.status);
          if (err.status) {
            if (err.data.message) {
              this.errorMessage = err.data.message;
            } else {
              this.errorMessage = "Username or passord is incorrect."
            }
          }
        }
        ); 
      }
    },
    checkUserStatus() {
      if (Log.isLoggedIn()) {
        this.logout();
        this.$router.go();
      }
    },
    togglePassword() {
      this.showPassword = true;
      this.isPasswordShown = "text";
    },
    passwordToggled() {
      this.showPassword = false;
      this.isPasswordShown = "password";
    },
    SendMail() {},
    routerGoTo(goTo) {
      this.$router.push(goTo);
    },
    validate : function(){
      if (this.username && this.password){
        this.errorOccurred = '';
        this.errorMessage = '';
        return true;
      } else {
        this.errorOccurred = "ERROR";
        this.errorMessage = "Username or passord is incorrect.";
        return false;
      }
    },
    requiredField : function(tfield) {
      if(tfield){
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
