/*
 * cass-shortcode-member-register - Vue.js
 *
 * This shortcode is used to display the member register form
 */

document.addEventListener('DOMContentLoaded', function () {
  var loader = document.getElementById('cass_member_register');

  if (loader) {
    new Vue({
      el: '#cass_member_register',
      data: {
        user: {
          inputLast: '',
          inputFirst: '',
          inputMail: '',
          inputPassword: '',
          inputMemberNo: '',
          inputTelephone: '',
          inputAddress: '',
          inputNPA: '',
          inputLocality: '',
          cassLevel: '',
          cassGroup: ''
        },
        errors: [],
        groups: [],
        levels: [],
      },
      created() {
        this.fetchLevels();
        this.fetchGroups();
      },
      methods: {
        submitForm: function () {
          const adminUrl = window.adminPostUrl;
          const siteUrl = window.siteUrl;
          this.errors = [];

          if (this.errors.length === 0) {
            const formData = new FormData();
            formData.append('action', "member_register");
            formData.append('g-recaptcha-response', grecaptcha.getResponse());
            formData.append('inputLast', this.user.inputLast);
            formData.append('inputFirst', this.user.inputFirst);
            formData.append('inputMail', this.user.inputMail);
            formData.append('inputPassword', this.user.inputPassword);
            formData.append('inputMemberNo', this.user.inputMemberNo);
            formData.append('inputTelephone', this.user.inputTelephone);
            formData.append('inputAddress', this.user.inputAddress);
            formData.append('inputNPA', this.user.inputNPA);
            formData.append('inputLocality', this.user.inputLocality);
            formData.append('cassLevel', this.user.cassLevel);
            formData.append('cassGroup', this.user.cassGroup);

            axios.post(adminUrl, formData)
              .then(response => {

                if (response.data.success) {
                  this.user.inputLast = '';
                  this.user.inputFirst = '';
                  this.user.inputMail = '';
                  this.user.inputPassword = '';
                  this.user.inputMemberNo = '';
                  this.user.inputTelephone = '';
                  this.user.inputAddress = '';
                  this.user.inputNPA = '';
                  this.user.inputLocality = '';
                  this.user.cassLevel = '';
                  this.user.cassGroup = '';
                  grecaptcha.reset();
                } else {
                  grecaptcha.reset();
                }
                alert(response.data.message);
              })
              .catch(error => {
                console.error(error);
              });
          }
        },
        fetchGroups() {
          siteUrlGroup = siteUrl + "/wp-json/wp-cass/v1/cass-group-list";
          axios.get(siteUrlGroup)
            .then(response => {
              this.groups = response.data;
            })
            .catch(error => {
              console.error('Erreur lors de la récupération de la liste des groupes : ', error);
            });
        },
        fetchLevels() {
          var siteUrlLevel = siteUrl + "/wp-json/wp-cass/v1/cass-level-list";
          axios.get(siteUrlLevel)
            .then(response => {
              this.levels = response.data;

            })
            .catch(error => {
              console.error('Erreur lors de la récupération de la liste des niveaux : ', error);
            });
        },
      },
    });
  }
});
