<template>
  <div class="reg-page">
    <div class="regform">
      <div class="col-md-12" style="text-align:left">
        <h4>User Registration</h4>
        <div class="form-group row"></div>
        <div v-if="hasError" class="form-group row">
          <div>
            <alert :text="resultString" :type="'ERROR'" class="col-md-12" />
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Name</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input class="form-control" type="text" name="name" v-model="userContainer.firstName" />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Surname</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="book-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="surname"
                v-model="userContainer.surname"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Email Address</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="email-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="email"
                v-model="userContainer.emailAddress"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Cellphone</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="phone-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="cellnumber"
                v-model="userContainer.cellphone"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Password</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                :type="PasswordBoxType"
                id="password"
                name="password"
                v-model="userContainer.password"
                value
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-12" style="margin-bottom: 1em">
            <label>Confirm Password</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="lock-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                :type="PasswordBoxType"
                id="confirmpassword"
                name="confirmpassword"
                v-model="confirmpassword"
                value
              />
              <div>
                <div class="input-group-append">
                  <span class="input-group-text">
                    <eva-icon
                      v-if="showPassword"
                      name="eye-off-outline"
                      fill="#24aae1"
                      @click="togglePassword()"
                    ></eva-icon>
                    <eva-icon v-else name="eye-outline" fill="#24aae1" @click="togglePassword()"></eva-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row"></div>
        <div class="row offset-md-4">
          <div class="col-md-2">
            <button
              @click="RegisterData()"
              class="btn btn-b-n"
              type="submit"
              data-dismiss="modal"
            >Submit</button>
          </div>
          <div class="col-md-2 offset-md-1">
            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import alert from "../shared/alert.vue";

export default {
  name: "registration",
  components: {
    alert
  },
  data() {
    return {
      showPassword: false,
      PasswordBoxType: "password",
      confirmpassword: "",
      hasError: false,
      errorMsg: ""
    };
  },
  methods: {
    ...mapActions("registration", ["regUser", "getUserContainer"]),
    RegisterData() {
      this.hasError = false;
      this.errorMsg = "";

      if (this.userContainer.password !== this.confirmpassword) {
        this.hasError = true;
        this.errorMsg = "Passwords do not match.";
        return;
      }

      // this.regUser(this.userContainer).then(() => {
      //   if (this.userContainer.Id > 0) {
      //     this.$router.push("/login");
      //   } else {
      //     this.errorMsg = this.userContainer.resultString;
      //     this.hasError = true;
      //     this.userContainer.password = "";
      //     this.confirmpassword = "";
      //   }
      // });
      this.regUser(this.userContainer);
      this.$router.push("/login");
    },
    Close() {
      this.$router.push("/");
    },
    togglePassword() {
      if (this.showPassword) {
        this.showPassword = false;
        this.PasswordBoxType = "password";
      } else {
        this.showPassword = true;
        this.PasswordBoxType = "Text";
      }
    }
  },
  computed: {
    ...mapState("registration", ["userContainer"]),
    resultString() {
      return this.userContainer.resultString;
    }
  },
  mounted() {
    this.getUserContainer();
  }
};
</script>
