<template>
  <div class="login-page">
    <div class="columns is-centered px-0 mx-0 my-0">
      <div :class="`column wrapper-login is-4-desktop is-6-tablet`">
        <div class="px-6 py-6 login-box">
          <div class="login-header">
            <Logo />
            <h2 class="title mt-4 has-text-centered">{{ isVietnamese ? 'Đăng nhập' : 'Login' }}</h2>
          </div>
          <div class="login-body">
            <div class="form-login">
              <div class="field mt-5">
                <label class="label">Email<b class="ml-1 has-text-danger">*</b></label>
                <div class="control">
                  <input
                    class="input"
                    type="email"
                    placeholder="Nhập email"
                    v-model="email"
                    @blur="validateEmail(email)"
                  />
                </div>
                <p
                  class="help is-danger"
                  v-if="errors.find((v) => v.name === 'email')"
                  v-html="errors.find((v) => v.name === 'email').text"
                ></p>
              </div>
              <div class="field mt-5">
                <label class="label">Mật khẩu<b class="ml-1 has-text-danger">*</b></label>
                <div class="field-body">
                  <div class="field has-addons">
                    <p class="control is-expanded">
                      <input
                        class="input"
                        :type="showpass ? 'text' : 'password'"
                        placeholder="Nhập mật khẩu"
                        v-model="password"
                        @blur="validatePassword(password)"
                      />
                    </p>
                    <div class="control">
                      <a class="button" @click="showpass = !showpass">
                        <span class="icon">
                          <i
                            :class="
                              showpass
                                ? 'mdi mdi-eye-outline has-text-dark fs22'
                                : 'mdi mdi-eye-off-outline has-text-dark fs22'
                            "
                          />
                        </span>
                      </a>
                    </div>
                  </div>
                </div>
                <p class="help is-danger" v-if="errors.find((v) => v.name === 'password')">
                  {{ errors.find((v) => v.name === 'password').text }}
                </p>
              </div>
              <div class="field mt-5 pt-1 group-action">
                <button class="button is-primary" @click="signin()">Đăng nhập</button>
                <a class="is-primary" @click="accountRecovery()">Quên mật khẩu?</a>
              </div>
            </div>
            <div class="social-login">
              <div class="social-header my-4">
                <span>Hoặc</span>
              </div>
              <div class="social-body">
                <div class="social-item">
                  <GoogleLogin class="button" :onSuccess="onSuccess" :params="params">
                    <img class="icon" src="/icons/google.svg" alt="Google" />
                    <span>Đăng nhập với Google</span>
                  </GoogleLogin>
                </div>
                <div class="social-item">
                  <button class="button" @click="logInWithFacebook()">
                    <img class="icon" src="/icons/facebook.svg" alt="Facebook" />
                    <span> Đăng nhập với Facebook </span>
                  </button>
                </div>
              </div>
            </div>

            <p class="mt-5 has-text-centered">
              Chưa có tài khoản?
              <nuxt-link class="ml-2" to="/signup">Tạo tài khoản</nuxt-link>
            </p>

            <div class="info-support mt-4">
              <div class="support-header">
                <h5 class="title">Cần hỗ trợ</h5>
              </div>
              <div class="support-body">
                <p class="support-item">
                  <a :href="`tel:${company.phone.support}`" target="_blank">
                    <img src="/icons/phone-call.svg" alt="Support" width="24" height="24" />
                    <span>{{ company.phone.support }}</span>
                  </a>
                </p>
                <p class="support-item">
                  <a :href="`mailto:${company.email.support}`">
                    <img src="/icons/email.svg" alt="" width="24" height="24" />
                    <span>{{ company.email.support }}</span>
                  </a>
                </p>
              </div>
            </div>
          </div>

          <div class="login-footer">
            <img src="/icons/shield.svg" alt="" width="24" />

            <span> {{ new Date().getFullYear() }} </span> &nbsp;
            <span v-if="isVietnamese">
              Bản quyền thuộc về
              <a
                :href="company.parent.website"
                target="_blank"
                rel="noopener noreferrer"
                :title="company.parent.slogan"
                >{{ company.parent.name }}</a
              >
            </span>

            <span v-else>
              Copyright by
              <a
                :href="company.parent.website"
                target="_blank"
                rel="noopener noreferrer"
                :title="company.parent.sloganEn"
                >{{ company.parent.name }}</a
              >
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bowser from 'bowser';
import GoogleLogin from 'vue-google-login';

export default {
  components: {
    GoogleLogin,
  },
  head() {
    return { title: `${this.isVietnamese ? 'Đăng nhập' : 'Login'} - ${this.company.name}` };
  },
  data() {
    return {
      fullname: undefined,
      username: undefined,
      email: undefined,
      password: undefined,
      errors: [],
      showpass: false,
      registers: [],
      params: { client_id: '389310749372-mnfsd09ukgl0ahbdrm94dsepremlfgs9.apps.googleusercontent.com' },
      type: undefined,
      isLoaded: false,
      data: undefined,
      account: undefined,
      company: this.$companyInfo(),
      isVietnamese: true,
    };
  },
  mounted() {
    window.addEventListener('keyup', (ev) =>
      ev.key === 'Enter' && this.$route.name === 'signup' ? this.signin() : false,
    );
  },
  watch: {
    isLoaded: function (newVal) {
      if (this.isLoaded) {
        let self = this;
        window.FB.login(
          function (response) {
            if (response.authResponse) {
              let userId = response.authResponse.userID;
              self.getUserInfo(userId);
            }
          },
          {
            scope: 'public_profile,email',
            return_scopes: true,
            auth_type: 'rerequest',
          },
        );
      }
    },
  },
  computed: {
    login: {
      get: function () {
        return this.$store.state.login;
      },
      set: function (val) {
        this.$store.commit('updateLogin', { login: val });
      },
    },
    registermethod: {
      get: function () {
        return this.$store.state.registermethod;
      },
      set: function (val) {
        this.$store.commit('updateRegisterMethod', { registermethod: val });
      },
    },
    authmethod: {
      get: function () {
        return this.$store.state.authmethod;
      },
      set: function (val) {
        this.$store.commit('updateAuthMethod', { authmethod: val });
      },
    },
    authstatus: {
      get: function () {
        return this.$store.state.authstatus;
      },
      set: function (val) {
        this.$store.commit('updateAuthStatus', { authstatus: val });
      },
    },
    usertype: {
      get: function () {
        return this.$store.state.usertype;
      },
      set: function (val) {
        this.$store.commit('updateUserType', { usertype: val });
      },
    },
    viewport: {
      get: function () {
        return this.$store.state.viewport;
      },
      set: function (val) {
        this.$store.commit('updateViewPort', { viewport: val });
      },
    },
  },
  methods: {
    checkError() {
      this.errors = [];
      if (!this.$empty(this.email)) {
        this.email = this.email.trim().toLowerCase();
      }

      this.validateEmail(this.email);
      this.validatePassword(this.password);

      return this.errors.length > 0 ? true : false;
    },

    validateEmail(email) {
      // Xóa lỗi cũ
      this.errors = this.errors.filter((err) => err.name !== 'email');

      if (this.$empty(email)) {
        this.errors.push({
          name: 'email',
          text: 'Email không được để trống.',
        });
        return false;
      }

      if (!this.$regexEmail(String(email).toLowerCase())) {
        this.errors.push({
          name: 'email',
          text: 'Email không đúng định dạng.',
        });
        return false;
      }

      return true;
    },

    validatePassword(password) {
      // Xóa lỗi cũ
      this.errors = this.errors.filter((err) => err.name !== 'password');

      if (this.$empty(password)) {
        this.errors.push({
          name: 'password',
          text: 'Mật khẩu không được để trống.',
        });
        return false;
      }

      if (!this.$regexPassword(String(password).toLowerCase())) {
        this.errors.push({
          name: 'password',
          text: 'Mật khẩu không đúng định dạng.',
        });
        return false;
      }

      return true;
    },

    async signin() {
      if (this.checkError()) return;
      let conn = this.$findapi('login');
      conn.params.filter = { email: this.email, password: this.password };
      let result = await this.$getapi([conn]);
      let data = result?.find((v) => v.name === 'login').data.rows;
      this.account = data;
      this.fillData(data);
    },
    onSuccess(googleUser) {
      let info = googleUser.getBasicProfile();

      let keys = Object.keys(info);
      this.email = info[keys[5]];
      this.fullname = info[keys[1]];
      this.username = info[keys[0]];
      this.type = 'google';
      if (!this.$empty(this.email)) this.checkAccount();
    },
    async checkAccount() {
      if (this.$empty(this.email)) return;
      let found = this.$findapi('user');
      found.params = { filter: { email: this.email } };
      let result = await this.$getapi([found]);
      let data = result.find((v) => v.name === 'user').data.rows;
      if (data.length > 0) this.fillData(data[0]);
      else {
        let rs = await this.$insertapi('gethash', { text: this.$id() });
        let hash = rs.rows[0];
        let registerMethod = this.registermethod.find((v) => v.code === 'create-account').id;
        if (this.type) registerMethod = this.registermethod.find((v) => v.code === this.type).id;
        data = {
          fullname: this.fullname,
          username: this.username ?? this.email,
          email: this.email,
          password: hash,
          type: this.usertype.find((v) => v.code === 'customer').id,
          register_method: registerMethod,
          auth_status: this.authstatus.find((v) => v.code === 'auth').id,
          auth_method:
            this.email.indexOf('@') >= 0
              ? this.authmethod.find((v) => v.code === 'email').id
              : this.authmethod.find((v) => v.code === 'phone').id,
          display_name: this.fullname,
        };

        let res = await this.$insertapi('user', data);
        if (res !== 'error') {
          this.login = res;
          this.redirectUrl();
        }
      }
    },
    invalidLogin(data) {
      console.log('login', data);

      if (!data) {
        const text = 'Tài khoản hoặc mật khẩu không chính xác';
        this.errors.push({ name: 'email', text: text });
        this.errors.push({ name: 'password', text: text });
      } else if (data.blocked) {
        this.errors.push({ name: 'email', text: 'Tài khoản đang bị khóa. Đăng nhập không thành công' });
      } else if (data.auth_status === 1) {
        this.errors.push({
          name: 'email',
          text: `Tài khoản đang chờ xác thực. <a @click="$emit('resend')">Gửi lại mã</a>`,
        });
      }
      return this.errors.length > 0 ? true : false;
    },
    async fillData(data) {
      if (this.invalidLogin(data)) return;
      this.login = data; //store  login
      if (data.type === 1 || data.type__code === 'customer') {
        this.redirectUrl();
      } else if (this.$store.state.link) {
        let ele = this.$copy(data);
        if (
          this.$store.state.link.indexOf('bigdatatech.vn') < 0 &&
          this.$store.state.link.indexOf('localhost:3000') < 0
        ) {
          return this.$redirectWeb(ele);
        }
        //get token & redirect link
        const browser = Bowser.getParser(window.navigator.userAgent);
        let obj = {
          browser: browser.getBrowserName(),
          browser_version: browser.getBrowserVersion(),
          platform: browser.getPlatform().type,
          os: browser.getOSName(),
          user: data.id,
          token: this.$id(),
        };
        ele.token = obj.token;
        await this.$insertapi('authtoken', obj);
        //await this.sendNoti(obj)
        this.$redirectWeb(ele);
      } else this.redirectUrl();
    },
    async sendNoti(obj) {
      let found = this.$findapi('notiform');
      found.params.filter = { code: 'login-alert' };
      const result = await this.$getapi([found]);
      let data = result[0].data.rows[0];
      let content = data.detail;
      content = content.replace('[1]', this.email);
      content = content.replace('[2]', obj.browser);
      content = content.replace('[3]', obj.browser_version);
      content = content.replace('[4]', obj.platform);
      content = content.replace('[5]', obj.os);
      content = content.replace('[6]', this.$dayjs().format('DD/MM/YYYY HH:mm'));
      let ele = { title: data.name, content: content, user: [obj.user.toString()], type: 1 };
      await this.$insertapi('notification', ele);
    },
    async logInWithFacebook() {
      if (window.FB) {
        let self = this;
        window.FB.login(
          function (response) {
            if (response.authResponse) {
              let userId = response.authResponse.userID;
              self.getUserInfo(userId);
            }
          },
          {
            scope: 'public_profile,email',
            return_scopes: true,
            auth_type: 'rerequest',
          },
        );
      } else {
        await this.loadFacebookSDK(document, 'script', 'facebook-jssdk');
        await this.initFacebook();
      }
    },
    async initFacebook() {
      let self = this;
      window.fbAsyncInit = function () {
        window.FB.init({
          appId: '314849628253331',
          cookie: true,
          xfbml: true,
          version: 'v8.0',
        });
        self.isLoaded = true;
      };
    },
    async loadFacebookSDK(d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = 'https://connect.facebook.net/en_US/sdk.js';
      fjs.parentNode.insertBefore(js, fjs);
    },
    getUserInfo(userId) {
      let self = this;
      window.FB.api('/me?fields=id,name,email', function (response) {
        self.email = response.email;
        self.fullname = response.name;
        self.type = 'facebook';
        self.checkAccount();
      });
    },
    accountRecovery() {
      this.$router.push({ path: '/account/recovery' });
    },
    // async resendAuthcode() {
    //   let code = this.$id();
    //   let result = await this.$insertapi('userauth', { user: this.account.id, code: code });
    //   let query = this.$store.state.link ? { link: this.$store.state.link } : {};
    //   query.id = this.account.id;
    //   query.email = this.email;
    //   query.action = 'sendcode';
    //   this.$router.push({ path: '/account/auth', query: query });
    // },
    async redirectUrl() {
      this.$router.push(this.$route.query.href || '/welcome');
    },
  },
};
</script>

<style lang="scss">
.login-page {
  background-color: #f0fdf4;
  min-height: 100vh;
  align-content: center;

  button.is-primary {
    background-color: #53b147;
    box-shadow: 0 4px 12px rgba(83, 177, 71, 0.25);
    &:hover {
      background: #45963a;
      transform: translateY(-1px);
    }
  }

  .wrapper-login {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #bbf7d0;
    background-color: #fff;
    padding: 0;
    // .login-header {
    // }
    .login-body {
      .form-login {
        .group-action {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
      .social-login {
        .social-header {
          text-align: center;
          position: relative;
          &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
            background-color: #ddd;
          }
          span {
            position: relative;
            z-index: 1;
            background-color: #fff;
            padding: 0 10px;
          }
        }
        .social-body {
          display: flex;
          align-items: center;
          gap: 10px;

          .social-item {
            flex: 1;
            button {
              height: fit-content;
              width: 100%;
              font-weight: 600;
              &:hover {
                background-color: #bbf7d0;
                border-color: #bbf7d0;
              }
            }
            .icon {
              width: 24px;
              height: 24px;
            }
          }
        }
      }

      .info-support {
        background-color: #fff;
        border: 1px solid #bbf7d0;
        border-radius: 16px;
        overflow: hidden;

        .support-header {
          background-color: #f0fdf4;
          text-align: center;
          padding: 14px 0;
          .title {
            font-weight: bold;
            font-size: 16px;
          }
        }
        .support-body {
          display: flex;
          padding: 16px 0;
          align-items: center;
          justify-content: space-around;
          .support-item {
            a {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 6px;
              color: #374151;
              &:hover {
                color: #16a34a;
                img {
                  filter: brightness(0) saturate(100%) invert(40%) sepia(80%) saturate(400%) hue-rotate(90deg);
                }
              }
            }
          }
        }
      }
    }

    .login-footer {
      margin-top: 24px;
      padding-top: 12px;
      border-top: 1px solid #e5e7eb;

      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 12px;
      color: #9ca3af;

      span {
        white-space: nowrap;
      }
    }
  }
}
</style>
