import axiosApi from '@assets/js/axios-api';
import param from '@assets/js/param';
import initVue from '@assets/js/initVue.js';
import Vue from 'vue';

const vm = new Vue ({
  components: {
    BaseContent: () => import(/* webpackChunkName: "BaseContent" */ '@elements/BaseContent/index.vue'),
    BaseVueToggles: () => import(/* webpackChunkName: "BaseVueToggles" */ '@elements/BaseVueToggles/index.vue'),
    BaseModal: () => import(/* webpackChunkName: "BaseModal" */ '@components/BaseModal/index.vue'),
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
    BaseCheckbox: () => import(/* webpackChunkName: "BaseCheckbox" */ '@elements/BaseCheckbox/index.vue'),
  }, 
  data() {
    return {
      configurations: {
        feedback_whatsapp_status: '',
        newsletter: '',
      },
      customer_info: {},
      showModal: false,
      success: ""
    };
  }, 
  watch: {
    "configurations.feedback_whatsapp_status": {
      async handler(newValue, oldValue) {
        await this.getFeedbackStatus();
      },
      immediate: true, 
    },
    "configurations.newsletter": {
      async handler(newValue, oldValue) {
        await this.getNewsletterStatus();
      },
      immediate: true, 
    },
  },
  methods: {
    setData({ configurations }){
      const { customer_info, success } = configurations;

      this.customer_info = customer_info; 
      this.success = success;
    },
    async getFeedbackStatus() {
      const feedback_status = this.configurations.feedback_whatsapp_status;
      await axiosApi.post(
        'index.php?route=feedback/feedback/authorization',
        param({
          feedback_status,
        })
      );
    },
    async getNewsletterStatus() {
      const newsletter = this.configurations.newsletter;
      await axiosApi.post(
        'index.php?route=account/newsletter', 
        param({ 
          newsletter 
        })
      );
    },
    openModal(){
      this.showModal = true;
    },

    onClose(){
      this.showModal = false;
    },
    setDeleteAccount(){
      const deleteAccountConfirmation = document.querySelector('.js-deleteAccount-confirmation');
      const confirmationDelete = document.getElementById('confirmationDelete');

      if(deleteAccountConfirmation){
        if(confirmationDelete.checked == true){
          $.ajax({
            url: 'index.php?route=account/account/deleteAccount',
            type: 'POST',
            success: function (data) {
              if(data.success){
                document.location.reload();
              }
            }
          });
        }else{
          notificationMsg( 'Para prosseguir é necessário concordar com as condições.' , 'warning');
        }
      }
    },
    menuAccount(){
      const menuAccount = document.querySelector('.js-account');
      document.querySelector('body').classList.toggle('overflow-block');
      if (menuAccount) {
        menuAccount.onclick = function(event) {
          if (this.getAttribute('href') === window.location.href) {
            event.preventDefault();
            document.querySelector('.js-account-aside').classList.toggle('hidden-md-down');
            document.querySelector('.js-account-container').classList.toggle('hidden-md-down');
          } else {
            window.location = this.getAttribute('href');
          }
        };
      }
    },
 
  },
  mounted() {
    this.configurations.feedback_whatsapp_status = this.customer_info.feedback_whatsapp_status;
    this.configurations.newsletter = this.customer_info.newsletter;
    this.menuAccount();

    if(this.success){
      notificationMsg(this.success, "success");
    }
  }
})

initVue(vm);