import Vue from 'vue';
import store from "@components/TheFooter/storeFooter.js";
import whatsAppWidget from '@widgets/whatsAppWidget';
import backToTopWidget from '@widgets/backToTopWidget';
import cookiesPolicyWidget from '@widgets/cookiesPolicyWidget';
import testEnvironmentWidget from '@widgets/testEnvironmentWidget';

const vm = new Vue({
  el: '#footer',
  components: {
    TheFooter: () => import(/* webpackChunkName: "TheFooter" */ '@components/TheFooter/index.vue'),
  },
  data() {
    return {
      base_layout: dataFooter.base_layout,
      scripts_async: dataFooter.scripts_async,
      google_recaptcha_status: dataFooter.google_recaptcha_status,
    }
  },
  methods: {
    setData() {
      // Don't remove!!! It's necessary to vue instance and pass info to components
    }, 
    loadWidget() {
      const { backToTop, whatsApp, cookiesPolicy, testEnvironment } = dataFooter;
      if (whatsApp) whatsAppWidget(whatsApp);  
      if (backToTop) backToTopWidget(backToTop);      
      if (cookiesPolicy) cookiesPolicyWidget(cookiesPolicy);
      if (testEnvironment) testEnvironmentWidget(testEnvironment);
      return;
    },
    initilizeData() {
      // General data
      const commomData = {
        languages: dataFooter.language,
        footerStyle: dataFooter.footerStyle,
        enableComponents: dataFooter.enableComponents,
      }

      Object.entries(commomData).map( ([key, values]) => {
        store.commit(key, values);
      });

      if (this.base_layout) {
        // Custom Layout
        const customData = {
          customInformations: dataFooter.customInformations,
          customServices:     dataFooter.customServices,
          customAccount:      dataFooter.customAccount,
          customContact:      dataFooter.customContact,
          customSocialUrls:   dataFooter.customMediasUrls,
          customSocialStyle:  dataFooter.customMediasStyle,
          customPayment:      dataFooter.customPayment,
          customCertificates: dataFooter.customCertificates,
          customOptions:      dataFooter.customOptions,
          customLayout:       dataFooter.customLayout,
        }

        return Object.entries(customData).map( ([key, values]) => {
          store.commit(key, values);
        });

      } else {
        // Dynamic Layout
        const DynamicData = {
          dynamicInformations: dataFooter.dynamicInformations,
          dynamicServices:     dataFooter.dynamicServices,
          dynamicAccount:      dataFooter.dynamicAccount,
          dynamicContact:      dataFooter.dynamicContact,
          dynamicSocialUrls:   dataFooter.dynamicMediasUrls,
          dynamicSocialStyle:  dataFooter.dynamicMediasStyle,
          dynamicPayment:      dataFooter.dynamicPayment,
          dynamicCertificates: dataFooter.dynamicCertificates,
          dynamicOptions:      dataFooter.dynamicOptions,
        }
        
        return Object.entries(DynamicData).map( ([key, values]) => {
          store.commit(key, values);
        });
      }
    },
  },
  created() {
    this.initilizeData();
    this.loadWidget();
  },
});

vm.setData(dataFooter);
vm.$mount('#footer');