<template>
  <div class="auth-wrap">
    <div
      v-if="!isUsePopup"
      class="auth-logo-wrap"
    >
      <img
        :src="configApp.logoDark"
        class="auth-logo"
        alt="AutoShopee"
      />
    </div>

    <Card
      dis-hover
      class="auth-card"
    >
      <p
        slot="title"
        class="auth-card__title"
      >
        {{ $t('BTN_REGISTER') }}
      </p>

      <Form
        ref="registerForm"
        :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
            type="primary"
            long
            size="large"
            :loading="loading"
            @click="registerSubmit"
          >
            {{ $t('GO_REGISTER') }}
          </Button>
        </FormItem>
      </Form>

      <Divider plain>
        {{ $t('REGISTER_OR') }}
      </Divider>

      <Button
        long
        @click="goToLogin"
      >
        {{ $t('BTN_LOGIN') }}
      </Button>
    </Card>
  </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 scoped>
.auth-wrap {
  padding: 16px 0;
}
.auth-logo-wrap {
  text-align: center;
  margin-bottom: 16px;
}
.auth-logo {
  height: 36px;
  object-fit: contain;
}
.auth-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.auth-card__title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #1a1a1a;
  margin: 0;
}
</style>
