import Vue from 'vue';
import formMixin from "@mixins/formMixin";
import initVue from '@assets/js/initVue';
import axiosApi, {param} from "@assets/js/axios-api";

const BASE_URL = document.getElementById('base-urls').dataset.baseUrlLoja;

const vm = new Vue({
  data() {
    return {
      current_password: '',
      password: '',
      confirm: '',
      error: {
        current_password: '',
        password: '',
        confirm: '',
      },
      sucess: '',
      redirect: '',
    }
  },
  mixins: [formMixin],
  components: {
    BaseContent: () => import(/* webpackChunkName: "BaseContent" */ '@elements/BaseContent/index.vue'),
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
  },
  watch: {},
  methods: {
    setData({ password, current_password, confirm, error, sucess, redirect }) {
      this.current_password = current_password;
      this.password = password;
      this.confirm = confirm;
      this.error.current_password = error;
      this.error.password = error; 
      this.error.confirm = error;
      this.sucess = sucess;
      this.redirect = redirect;
    },

    validate(){
      axiosApi({
        headers: {'content-type': 'application/x-www-form-urlencoded'},
        url: BASE_URL + '/index.php?route=account/password/save',
        method: 'POST',
        data:param({ 
          current_password: this.current_password,
          password: this.password,
          confirm: this.confirm,
        })
      })
        .then(({data}) => {
          this.sucess = data.sucess;
          this.redirect = data.link; 

          if(this.sucess != ''){
            notificationMsg(this.sucess, 'success');
            this.addValidClass();

            setTimeout(() => {
              window.location.href = this.redirect;
            }, 3000);

          }else{
            if(data.error){
              this.error = data.error;
              notificationMsg('Atenção: Alguns campos estão incorretos. Corrija os campos em vermelho!', 'error');

              if(this.error.current_password){
                document.getElementById('current_password').classList.add('error-field-list-school');
              }else{
                document.getElementById('confirm').classList.remove('error-field-list-school');
              }

              if(this.error.password){
                document.getElementById('password').classList.add('error-field-list-school');
              }else{
                document.getElementById('confirm').classList.remove('error-field-list-school');
              }

              if(this.error.confirm){
                document.getElementById('confirm').classList.add('error-field-list-school');
              }else{
                document.getElementById('confirm').classList.remove('error-field-list-school');
              }

            }
          }  
        })
        .catch(err => console.log(err, err.response));
    },

    colorField(idField){
      document.getElementById(`${idField}`).classList.remove('error-field-list-school');
    },

    addValidClass(){
      document.getElementById('current_password').classList.add('valid-field-list-school');
      document.getElementById('password').classList.add('valid-field-list-school');
      document.getElementById('confirm').classList.add('valid-field-list-school');
    },
  },
  mounted() {
    this.current_password = '';
    this.password = '';
    this.confirm = '';
  }
});

initVue(vm);

