import Vue from "vue";
import g11n from "./store/modules/g11n";
import PropertyModule from "./store/modules/properties";
import DiscountsModule from "./store/modules/discounts";
import SiteModule from "./store/modules/site";

import "./directives/sortable";

import FreeProperties from "./components/vue/properties/FreeProperties";
import FixedProperties from "./components/vue/properties/FixedProperties";
import PropertyDataCollection from "./components/vue/properties/PropertyDataCollection";
import Discounts from "./components/vue/discounts/Discounts";
import Shipment from "./components/vue/shipments/Shipment";
import ConfirmModal from "./components/vue/ConfirmModal";
import VueCurrencyInput from 'vue-currency-input'

Vue.use(VueCurrencyInput)

export function boot(store) {
    store.registerModule('g11n', g11n);
    store.registerModule('properties', PropertyModule);
    store.registerModule('discounts', DiscountsModule);
    store.registerModule('sites', SiteModule);
}

export function register(store) {
    //Normally we use .entity-attributes here and create 1 vue instance and define all vue attributes (components) in that.
    //But this isn't possible at this moment because vue and jqueryUi do not play nicely together. You'll see that the Select attribute will
    //render twice on the screen for example. So we need to ditch jqueryUi first before we are going to use vue properly.

    let vueAttributes = document.querySelectorAll('.vue-attribute');
    if(vueAttributes && vueAttributes.length > 0) {
        vueAttributes.forEach((attribute) => {
            new Vue({
                el: attribute,
                components: {
                    FreeProperties,
                    FixedProperties,
                    PropertyDataCollection
                },
                store,
            });
        })

        //Load stuff so all components can get it via the vuex store modules.
        store.dispatch('sites/loadLanguagesHavingSites');
        store.dispatch('g11n/translation/loadTranslations', [
            { key: 'KMS::properties' }
        ]);
        store.dispatch('properties/loadProperties');
        store.dispatch('properties/loadPropertyKeys');
        store.dispatch('properties/loadPropertyKeyValueTranslations');
    }

    let kmsDiscountsView = document.querySelector('.js-kms-discounts');
    if(kmsDiscountsView) {
        new Vue({
            el: kmsDiscountsView,
            components: {
                Discounts,
                ConfirmModal
            },
            store
        })

        store.dispatch('g11n/regionInfo/loadNeutral');
        store.dispatch('sites/loadCurrentSite');
        store.dispatch('sites/loadLanguagesHavingSites');
        store.dispatch('g11n/translation/loadTranslations', [
            { key: 'KMS::discounts' },
            { key: 'KMS::discounts.selectable_discountable_types' }
        ]);
    }

    let shipmentView = document.querySelector('.js-kms-shipment');
    if(shipmentView) {
        new Vue({
            el: shipmentView,
            components: { Shipment },
            store
        })

        store.dispatch('g11n/translation/loadTranslations', [
            { key: 'KMS::shipments' },
            { key: 'KMS::pagination' },
        ]);
    }
}