<template>
  <div class="loginreg register-wrap">
    <div class="wrap">
      <div class="grid">
        <form
          class="form login register"
          @submit.prevent="registerEnstract"
          autocomplete="off"
        >
          <img
            :src="logo_path+'Logo.svg'"
            id="logo"
            class="reg-logo"
          />

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text register__icon" id="basic-addon1"
                ><i class="far fa-user"></i
              ></span>
            </div>

            <v-select
              :options="titles"
              v-model="register.title"
              label="country"
              v-bind:click="toggleVueSelect =  !toggleVueSelect"
              class="d-1of5 cursor"
            ></v-select>
            <input
              type="text"
              v-model="register.name"
              class="form-control"
              placeholder="Name"
              aria-label="Name"
              aria-describedby="basic-addon1"
            />
          </div>

         <div v-bind:class="{'select-open': isVueSelectOpen}" class="select-closed">

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text register__icon" id="basic-addon1"
                ><i class="far fa-building"></i
              ></span>
            </div>

            <input
              type="text"
              name="company_name"
              class="form-control"
              placeholder="Company Name"
              v-model="register.company_name"
            />
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text register__icon" id="basic-addon1"
                ><i class="fal fa-at"></i
              ></span>
            </div>

            <input
              type="email"
              name="email"
              class="form-control"
              placeholder="Email address"
              required="required"
              v-model="register.email"
            />
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text register__icon" id="basic-addon1"
                ><i class="far fa-lock"></i
              ></span>
            </div>

            <input
              type="password"
              name="password"
              class="form-control"
              placeholder="Password"
              required="required"
              v-model="register.password"
            />
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text register__icon" id="basic-addon1"
                ><i class="far fa-lock"></i
              ></span>
            </div>

            <input
              type="password"
              name="password_confirmation"
              class="form-control"
              placeholder="Confirm password"
              v-model="register.password_confirmation"
              required="required"
            />
          </div>

          <div id="errors" v-if="registerFail" v-for="error in errors">
            {{ error }}
            <br />
          </div>

          <div id="success" v-if="registerSuccess">
            Registered successfully. hold tight while we log you in....
          </div>

          <button type="submit" class="register-button" v-if="!registerSuccess">
            <div class="load-wrapp" v-if="isRegisterLoading">
              <div class="load-3">
                <div class="line line-white"></div>
                <div class="line line-white"></div>
                <div class="line line-whitek"></div>
              </div>
            </div>

            <span v-if="!isRegisterLoading">Create Account</span>
          </button>

          <div class="login-footer">
            <p class="message">Already have an account?</p>
            <p class="message">
              <router-link to="/login">Click here to sign in</router-link>
            </p>
         </div>

        </div>

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

<script>
import vSelect from "vue-select";
import Button from "../../includes/Button";
import api from '../../../mixins/api';

export default {
  mixins: [api],
  components: {
    "v-select": vSelect,
  },
  data() {
    return {
      errors: [],
      titles: ["Mr", "Mrs", "Miss", "Ms", "Mx", "Sir", "Missus", "M"],
      registerFail: false,
      isRegisterLoading: false,
      registerSuccess: false,
      logo_path: "",
      register: {
        name: "",
        title: "Mr",
        company_name: "",
        email: "",
        password: "",
        password_confirmation: "",
      },
      isVueSelectOpen: false,
    };
  },
  mounted() {
    this.logo_path = wpApiSettings.assets_url;
    document.body.classList.add("white-body");
  },
  methods: {
    toggleVueSelect() {
      // this.isVueSelectOpen = !isVueSelectOpen
    },
    async registerEnstract() {
      this.isRegisterLoading = true;

      const data = {
        name: this.register.name,
        email: this.register.email,
        title: this.register.title,
        company_name: this.register.company_name,
        password: this.register.password,
        password_confirmation: this.register.password_confirmation,
        referrer: wpApiSettings.referer
      };

      const response = await this.api(
        "post",
        window.apipath + "/users",
        data,
        1
      );

      if (response.status == 200) {
        this.registerSuccess = true;
        this.isRegisterLoading = false;
        this.registerFail = false;
        window.bearer_token = response.data.token;
        this.updateToken(response.data);
      }

      if (response.status == 422) {
        if (response.data.error == "validation_error") {
          this.errors = response.data.message;
          this.registerFail = true;
          this.isRegisterLoading = false;
        }
      }
    },

    async updateToken(token_data) {
      const data = {
        token: token_data.token,
      };

      const response = await this.api(
        "post",
        wpApiSettings.root + "enstract/v1/updateToken",
        data,
        0
      );

      if (response.status == 200) {
        this.registerSuccess = false;
        this.registerFail = false;

        this.$router.push({ name: "enstract.onboarding" }).catch(() => {});
      }
    },
    destroyed() {
      document.body.classList.remove("white-body");
    },
  },
};
</script>
