<template>
  <div class="auth-page" :style="!isShow ? { alignContent: 'center' } : {}">
    <div class="columns is-centered" v-if="isShow">
      <div class="column is-5 mx-0 auth-wrapper mt-6">
        <div class="auth-header mb-5">
          <Logo class="mb-5"></Logo>
          <h2 class="title">Xác thực tài khoản</h2>
        </div>
        <div class="auth-body">
          <template v-if="!userAuth">
            <article class="">
              <div class="py-3">
                <p class="has-text-centered mb-4">
                  Chúng tôi đã gửi mã xác thực gồm 9 ký tự đến email
                  <strong>{{ emailUser ? ' ' + emailUser : '' }}</strong
                  >.
                  <br />
                  Vui lòng nhập mã bên dưới hoặc kiểm tra email để xác thực.
                </p>
                <OtpInput v-model="code" :length="lengthCode" />
                <p class="help is-danger mt5 fs13 has-text-centered" v-if="errors.find((v) => v.name === 'code')">
                  {{ errors.find((v) => v.name === 'code').text }}
                </p>
              </div>
            </article>
            <div class="field mt-5">
              <p class="control has-text-centered">
                <a class="button is-primary" @click="checkCode()">Xác thực tài khoản</a>
              </p>
            </div>
            <p class="pt-4 has-text-danger has-text-centered" v-if="idUser">
              <span>Bạn chưa nhận được mã xác thực?</span>
              <br />
              <button :class="`button is-dark is-light ${loading ? 'is-loading' : ''} mt-4`" @click="sendCode()">
                Gửi lại mã
              </button>
            </p>
          </template>
          <template v-else-if="userAuth">
            <article class="message" :class="success ? 'is-primary' : 'is-danger'" v-if="success !== undefined">
              <div class="message-body has-background-white py-3">
                {{ message }}
                Xác thực tài khoản thành công.
              </div>
            </article>
            <div class="field mt-5" v-if="action">
              <p class="control">
                <nuxt-link class="button is-primary" :to="action.to">
                  {{ action.text }}
                </nuxt-link>
              </p>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="columns is-centered" v-else>
      <Logo isLogoMain></Logo>
    </div>
  </div>
</template>
<script>
import Logo from '~/components/Logo.vue';
import sendVerificationEmail from '~/components/template/email';

export default {
  data() {
    return {
      code: undefined,
      errors: [],
      userAuth: undefined,
      message: undefined,
      success: undefined,
      action: undefined,
      loading: false,
      isVietnamese: true,
      lengthCode: 9,
      isShow: false,
      idUser: undefined,
      emailUser: undefined,
      fullname: undefined,
    };
  },
  watch: {
    code(val) {
      if (val.length === this.lengthCode) {
        this.checkCode();
      }
    },
  },
  head() {
    return {
      title: `${this.isVietnamese ? 'Xác thực tài khoản' : 'Account Verification'} - ${this.$companyInfo().name}`,
    };
  },
  async created() {
    this.idUser = this.$route.query.id || undefined;
    this.emailUser = this.$route.query.email || undefined;
    if (!this.idUser && !this.emailUser) {
      return this.goToLogin();
    } else {
      const resUser = await this.$getdata('user', { id: this.idUser, email: this.emailUser });
      if (!resUser[0] || resUser[0]?.auth_status === 2) return this.goToLogin();
      this.fullname = resUser[0].fullname;
    }
    this.isShow = true;
    if (this.$route.query.code) {
      this.code = this.$route.query.code;
      this.checkCode();
    } else if (this.$route.query.action === 'sendcode') this.sendCode();
  },
  mounted() {
    let doc = document.getElementById('inputcode');
    if (doc) doc.focus();
    window.addEventListener('keyup', (ev) => (ev.key === 'Enter' && !this.success ? this.checkCode() : false));
  },
  computed: {
    login: {
      get: function () {
        return this.$store.state.login;
      },
      set: function (val) {
        this.$store.commit('updateLogin', { login: val });
      },
    },
  },
  methods: {
    async checkCode() {
      this.success = undefined;
      this.message = undefined;
      this.action = undefined;
      this.errors = [];
      this.validateCode(this.code);
      let resUserAuth = await this.$getdata('userauth', { code: this.code || 0, expiry: 0 });
      let data = resUserAuth?.[0] || null;

      if (data && this.errors.length === 0) {
        this.userAuth = data;
        if (!this.userAuth.expiry) {
          let result = await this.$getdata('user', { id: this.userAuth.user });
          let user = result[0];
          user.auth_status = 2;
          user.update_time = new Date();
          result = await this.$updateapi('user', user);
          return this.processAuth(result);
        }
        return this.goToLogin();
      } else this.errors.push({ name: 'code', text: 'Mã xác thực không hợp lệ' });
    },

    validateCode(code) {
      const value = String(code || '').trim();

      if (!value) {
        this.errors.push({ name: 'code', text: 'Mã xác thực không được bỏ trống' });
        return;
      }

      if (value.length !== 9) {
        this.errors.push({ name: 'code', text: 'Mã xác thực phải là 9 kí tự' });
        return;
      }
    },

    async processAuth(newVal) {
      if (newVal !== 'error') {
        this.message = 'Xác thực tài khoản thành công.';
        this.success = true;
        this.action = { name: 'signin', to: { path: '/signin' }, text: 'Đi tới trang đăng nhập' };
        this.userAuth.expiry = true;
        this.userAuth.update_time = new Date();
        await this.$updateapi('userauth', this.userAuth);
      } else if (newVal === false) {
        this.message = 'Có lỗi xẩy ra. Xác thực tài khoản thành công.';
        this.success = false;
      }
    },
    async sendCode() {
      let code = this.$id();
      let data = { user: this.$route.query.id, code: code };
      let result = await this.$insertapi('userauth', data);
      let query = this.$store.state.link
        ? { code: code, link: this.$store.state.link, id: this.idUser, email: this.emailUser }
        : { code: code, id: this.idUser, email: this.emailUser };
      let routeData = this.$router.resolve({ path: '/account/auth', query: query });
      let path = window.location.origin + routeData.href;

      const contentEmail = sendVerificationEmail(this.fullname, this.emailUser, code, path);
      data = { subject: 'Xác thực tài khoản BigDataTechCloud', content: contentEmail, to: this.emailUser };
      this.loading = true;
      result = await this.$insertapi('sendemail', data);
      let text = `Hãy mở email <b>${this.emailUser}</b> để nhận mã xác thực`;
      this.$dialog(text, 'Mã xác thực', undefined, 10);
      this.loading = false;
    },
    goToLogin() {
      return this.$router.push('/signin');
    },
  },
};
</script>

<style lang="scss">
.auth-page {
  min-height: 100vh;
  background-color: var(--bg-accent);

  .auth-wrapper {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--primary-200);
    background-color: #fff;
    .title {
      font-size: 2rem;
      text-align: center;
    }
  }
}
</style>
