<template>
  <div class="lg-register">
    <div class="lg-register__panel">
      <div
        v-if="!isUsePopup"
        class="lg-register__brand"
      >
        <img
          :src="configApp.logoDark"
          class="lg-register__logo"
          alt="AutoShopee"
        >
      </div>

      <div class="lg-register__card">
        <h2 class="lg-register__title">
          {{ $t('BTN_REGISTER') }}
        </h2>

        <Form
          ref="registerForm"
          class="lg-register__form"
          :model="form"
          :rules="rules"
        >
          <FormItem prop="username">
            <Input
              v-model="form.username"
              :placeholder="$t('USERNAME')"
              prefix="ios-person"
              size="large"
            />
          </FormItem>
          <FormItem prop="fullname">
            <Input
              v-model="form.fullname"
              :placeholder="$t('REGISTER_FULLNAME')"
              prefix="ios-contact"
              size="large"
            />
          </FormItem>
          <FormItem prop="email">
            <Input
              v-model="form.email"
              :placeholder="$t('SHOP_EMAIL')"
              prefix="ios-mail"
              size="large"
            />
          </FormItem>
          <FormItem prop="phoneNumber">
            <Input
              v-model="form.phoneNumber"
              :placeholder="$t('SHOP_PHONE_NUMBER')"
              prefix="ios-call"
              size="large"
            />
          </FormItem>
          <FormItem prop="password">
            <Input
              v-model="form.password"
              type="password"
              :placeholder="$t('PASSWORD')"
              prefix="ios-lock"
              size="large"
              password
            />
          </FormItem>
          <FormItem prop="passwordConfirm">
            <Input
              v-model="form.passwordConfirm"
              type="password"
              :placeholder="$t('REGISTER_PASSWORD_CONFIRM')"
              prefix="ios-lock"
              size="large"
              password
            />
          </FormItem>

          <FormItem class="mb-0">
            <Button
              class="lg-register__submit"
              type="primary"
              long
              size="large"
              :loading="loading"
              @click="registerSubmit"
            >
              {{ $t('GO_REGISTER') }}
            </Button>
          </FormItem>
        </Form>

        <div class="lg-register__divider">
          <span class="lg-register__divider-text">
            {{ $t('REGISTER_OR') }}
          </span>
        </div>

        <Button
          class="lg-register__alt"
          long
          size="large"
          @click="goToLogin"
        >
          {{ $t('BTN_LOGIN') }}
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { loggerVue } from '@/plugins/logger';

export default {
  name: 'RegisterIndex',
  data() {
    return {
      loading: false,
      form: {
        username: '',
        email: '',
        fullname: '',
        phoneNumber: '',
        password: '',
        passwordConfirm: '',
      },
    };
  },
  computed: {
    rules() {
      return {
        username: [
          { required: true, message: this.$t('VALIDATE_FIELD_REQUIRED'), trigger: 'blur' },
          { min: 4, message: this.$t('VALIDATE_USERNAME_MIN'), trigger: 'blur' },
          {
            pattern: /^[a-z0-9_]+$/,
            message: this.$t('VALIDATE_USERNAME_INVALID'),
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: this.$t('VALIDATE_FIELD_REQUIRED'), trigger: 'blur' },
          { type: 'email', message: this.$t('VALIDATE_EMAIL_INVALID'), trigger: 'blur' },
        ],
        fullname: [
          { required: true, message: this.$t('VALIDATE_FIELD_REQUIRED'), trigger: 'blur' },
        ],
        phoneNumber: [
          { required: true, message: this.$t('VALIDATE_FIELD_REQUIRED'), trigger: 'blur' },
          {
            pattern: /^[0-9]{9,11}$/,
            message: this.$t('VALIDATE_PHONE_INVALID'),
            trigger: 'blur',
          },
        ],
        password: [
          { required: true, message: this.$t('VALIDATE_FIELD_REQUIRED'), trigger: 'blur' },
          { min: 6, message: this.$t('VALIDATE_PASSWORD_MIN'), trigger: 'blur' },
        ],
        passwordConfirm: [
          { required: true, message: this.$t('VALIDATE_FIELD_REQUIRED'), trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error(this.$t('VALIDATE_PASSWORD_NOT_MATCH')));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
      };
    },
  },
  methods: {
    ...mapActions(['UserRegister']),
    goToLogin() {
      this.RouterPath('/login');
    },
    async registerSubmit() {
      const valid = await new Promise((resolve) => {
        this.$refs.registerForm.validate((result) => resolve(result));
      });

      if (!valid) {
        return;
      }

      this.loading = true;

      try {
        const result = await this.UserRegister({
          email: this.form.email,
          username: this.form.username,
          password: this.form.password,
          fullname: this.form.fullname,
          phoneNumber: this.form.phoneNumber,
          trialRequest: false,
        });

        if (!result.success) {
          this.$Message.error(result.msg || this.$t('REGISTER_ERROR_PLEASE_RETRY'));

          throw {
            msg: 'REGISTER_ERROR',
            result,
          };
        }

        this.$Message.success(result.msg || this.$t('REGISTER_SUCCESS_PLEASE_LOGIN'));
        this.RouterPath('/login');
      } catch (error) {
        loggerVue.error({
          msg: 'REGISTER_ERROR',
          error,
        });
      }

      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.lg-register {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 0;

  &__panel {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  &__brand {
    display: flex;
    justify-content: center;
  }

  &__logo {
    height: 36px;
    object-fit: contain;
  }

  &__card {
    @include card(20px);

    border: 1px solid $c-border;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  &__title {
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: $c-text-strong;
  }

  &__form {
    display: block;

    .ivu-form-item {
      margin-bottom: 14px;
    }

    .ivu-form-item.mb-0 {
      margin-bottom: 0;
    }

    .ivu-input {
      border-radius: $radius-item;
      border-color: $c-border-input;
      color: $c-text-strong;
      transition: border-color $motion-fast, box-shadow $motion-fast;

      &::placeholder {
        color: $c-text-placeholder;
      }

      &:hover {
        border-color: $c-brand-hover;
      }

      &:focus {
        border-color: $c-brand;
        box-shadow: 0 0 0 2px $c-brand-tint;
      }
    }

    .ivu-input-prefix i {
      color: $c-text-muted;
    }

    .ivu-form-item-error-tip {
      color: $c-error;
      font-size: 12px;
      padding-top: 4px;
    }
  }

  &__submit.ivu-btn {
    border-radius: $radius-item;
    font-weight: 600;
    background: $c-brand;
    border-color: $c-brand;
    box-shadow: none;
    transition: background $motion-fast, border-color $motion-fast;

    &:hover,
    &:focus {
      background: $c-brand-hover;
      border-color: $c-brand-hover;
    }

    &:active {
      background: $c-brand-active;
      border-color: $c-brand-active;
    }
  }

  &__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: $c-text-muted;
    font-size: 12px;

    &::before,
    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background: $c-border;
    }
  }

  &__divider-text {
    white-space: nowrap;
  }

  &__alt.ivu-btn {
    border-radius: $radius-item;
    font-weight: 600;
    color: $c-brand;
    border-color: $c-border-input;
    background: $c-surface;
    transition: color $motion-fast, border-color $motion-fast, background $motion-fast;

    &:hover,
    &:focus {
      color: $c-brand-hover;
      border-color: $c-brand-hover;
      background: $c-brand-tint;
    }
  }
}
</style>
