/**
 * Main imports.
 */
import Accounting from 'accounting';
import Vue         from 'vue';
import VeeValidate from 'vee-validate';
import VueCarousel from 'vue-carousel';
import translate   from '@components/trans';

/**
 * Lang imports.
 */
import ar from 'vee-validate/dist/locale/ar';
import de from 'vee-validate/dist/locale/de';
import fa from 'vee-validate/dist/locale/fa';
import fr from 'vee-validate/dist/locale/fr';
import nl from 'vee-validate/dist/locale/nl';
import tr from 'vee-validate/dist/locale/tr';

/**
 * Vue plugins.
 */
Vue.use(VueCarousel);
Vue.use(BootstrapSass);
Vue.use(VeeValidate, {
    dictionary: {
        ar: ar,
        de: de,
        fa: fa,
        fr: fr,
        nl: nl,
        tr: tr
    },
    events: 'input|change|blur'
});

/**
 * Filters.
 */
Vue.filter('currency', function(value, argument) {
    return Accounting.formatMoney(value, argument);
});

/**
 * Global components.
 */
Vue.component('vue-slider', () => import('vue-slider-component'));
Vue.component('mini-cart-button', () => import('@components/mini-cart-button'));
Vue.component('mini-cart', () => import('@components/mini-cart'));
Vue.component('modal-component', () => import('@components/modal'));
Vue.component('add-to-cart', () => import('@components/add-to-cart'));
Vue.component('star-ratings', () => import('@components/star-rating'));
Vue.component('quantity-btn', () => import('@components/quantity-btn'));
Vue.component('quantity-changer', () => import('@components/quantity-changer'));
Vue.component('proceed-to-checkout', () => import('@components/proceed-to-checkout'));
Vue.component('compare-component-with-badge', () => import('@components/header-compare-with-badge'));
Vue.component('searchbar-component', () => import('@components/header-searchbar'));
Vue.component('wishlist-component-with-badge', () => import('@components/header-wishlist-with-badge'));
Vue.component('mobile-header', () => import('@components/header-mobile'));
Vue.component('sidebar-header', () => import('@components/header-sidebar'));
Vue.component('right-side-header', () => import('@components/header-right-side'));
Vue.component('sidebar-component', () => import('@components/sidebar'));
Vue.component('product-card', () => import('@components/product-card'));
Vue.component('wishlist-component', () => import('@components/wishlist'));
Vue.component('carousel-component', () => import('@components/carousel'));
Vue.component('slider-component', () => import('@components/banners'));
Vue.component('child-sidebar', () => import('@components/child-sidebar'));
Vue.component('card-list-header', () => import('@components/card-header'));
Vue.component('logo-component', () => import('@components/image-logo'));
Vue.component('magnify-image', () => import('@components/image-magnifier'));
Vue.component('image-search-component', () => import('@components/image-search'));
Vue.component('compare-component', () => import('@components/product-compare'));
Vue.component('shimmer-component', () => import('@components/shimmer-component'));
Vue.component('responsive-sidebar', () => import('@components/responsive-sidebar'));
Vue.component('product-quick-view', () => import('@components/product-quick-view'));
Vue.component('product-quick-view-btn', () => import('@components/product-quick-view-btn'));
Vue.component('recently-viewed', () => import('@components/recently-viewed'));
Vue.component('product-collections', () => import('@components/product-collections'));
Vue.component('hot-category', () => import('@components/hot-category'));
Vue.component('hot-categories', () => import('@components/hot-categories'));
Vue.component('popular-category', () => import('@components/popular-category'));
Vue.component('popular-categories', () => import('@components/popular-categories'));
Vue.component('velocity-overlay-loader', () => import('@components/overlay-loader'));
Vue.component('vnode-injector', {
    functional: true,
    props: ['nodes'],
    render(h, { props }) {
        return props.nodes;
    }
});
Vue.component('go-top', () => import('@inotom/vue-go-top'));

/**
 * Start from here.
 */
$(function() {

    /**
     * Define a mixin object.
     */
    Vue.mixin(translate);

    Vue.mixin({
        data: function() {
            return {
                imageObserver: null,
                navContainer: false,
                headerItemsCount: 0,
                sharedRootCategories: [],
                responsiveSidebarTemplate: '',
                responsiveSidebarKey: Math.random(),
                baseUrl: getBaseUrl(),
            };
        },

        methods: {
            redirect: function(route) {
                route ? (window.location.href = route) : '';
            },

            debounceToggleSidebar: function(id, { target }, type) {
                this.toggleSidebar(id, target, type);
            },

            toggleSidebar: function(id, { target }, type) {
                if (
                    Array.from(target.classList)[0] === 'main-category'
                    || Array.from(target.parentElement.classList)[0] === 'main-category'
                ) {
                    let sidebar = $(`#sidebar-level-${id}`);
                    if (sidebar && sidebar.length > 0) {
                        if (type === 'mouseover') {
                            this.show(sidebar);
                        } else if (type === 'mouseout') {
                            this.hide(sidebar);
                        }
                    }
                } else if (
                    Array.from(target.classList)[0] === 'category' ||
                    Array.from(target.classList)[0] === 'category-icon' ||
                    Array.from(target.classList)[0] === 'category-title' ||
                    Array.from(target.classList)[0] === 'category-content' ||
                    Array.from(target.classList)[0] === 'rango-arrow-right'
                ) {
                    let parentItem = target.closest('li');

                    if (target.id || parentItem.id.match('category-')) {
                        let subCategories = $(
                            `#${
                                target.id ? target.id : parentItem.id
                            } .sub-categories`
                        );

                        if (subCategories && subCategories.length > 0) {
                            let subCategories1 = Array.from(subCategories)[0];
                            subCategories1 = $(subCategories1);

                            if (type === 'mouseover') {
                                this.show(subCategories1);

                                let sidebarChild = subCategories1.find(
                                    '.sidebar'
                                );
                                this.show(sidebarChild);
                            } else if (type === 'mouseout') {
                                this.hide(subCategories1);
                            }
                        } else {
                            if (type === 'mouseout') {
                                let sidebar = $(`#${id}`);
                                sidebar.hide();
                            }
                        }
                    }
                }
            },

            show: function(element) {
                element.show();
                element.mouseleave(({ target }) => {
                    $(target.closest('.sidebar')).hide();
                });
            },

            hide: function(element) {
                element.hide();
            },

            toggleButtonDisability({ event, actionType }) {
                let button = event.target.querySelector('button[type=submit]');

                button ? (button.disabled = actionType) : '';
            },

            onSubmit: function(event) {
                this.toggleButtonDisability({ event, actionType: true });

                if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();

                this.$validator.validateAll().then(result => {
                    if (result) {
                        event.target.submit();
                    } else {
                        this.toggleButtonDisability({
                            event,
                            actionType: false
                        });

                        eventBus.$emit('onFormError');
                    }
                });
            },

            isMobile: isMobile,

            loadDynamicScript: function(src, onScriptLoaded) {
                loadDynamicScript(src, onScriptLoaded);
            },

            getDynamicHTML: function(input) {
                let _staticRenderFns, output;

                const { render, staticRenderFns } = Vue.compile(input);

                if (this.$options.staticRenderFns.length > 0) {
                    _staticRenderFns = this.$options.staticRenderFns;
                } else {
                    _staticRenderFns = this.$options.staticRenderFns = staticRenderFns;
                }

                try {
                    output = render.call(this, this.$createElement);
                } catch (exception) {
                    console.log(this.__('error.something_went_wrong'));
                }

                this.$options.staticRenderFns = _staticRenderFns;

                return output;
            },

            getStorageValue: function(key) {
                let value = window.localStorage.getItem(key);

                if (value) {
                    value = JSON.parse(value);
                }

                return value;
            },

            setStorageValue: function(key, value) {
                window.localStorage.setItem(key, JSON.stringify(value));

                return true;
            }
        }
    });

    window.app = new Vue({
        el: '#app',

        data: function() {
            return {
                loading: false,
                modalIds: {},
                miniCartKey: 0,
                quickView: false,
                productDetails: [],
            };
        },

        mounted: function() {
            this.$validator.localize(document.documentElement.lang);

            this.addServerErrors();
            this.loadCategories();
            this.addIntersectionObserver();
        },

        methods: {
            onSubmit: function(event) {
                this.toggleButtonDisability({ event, actionType: true });

                if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();

                this.$validator.validateAll().then(result => {
                    if (result) {
                        event.target.submit();
                    } else {
                        this.toggleButtonDisability({
                            event,
                            actionType: false
                        });

                        eventBus.$emit('onFormError');
                    }
                });
            },

            toggleButtonDisable(value) {
                let buttons = document.getElementsByTagName('button');

                for (let i = 0; i < buttons.length; i++) {
                    buttons[i].disabled = value;
                }
            },

            addServerErrors: function(scope = null) {
                for (let key in serverErrors) {
                    let inputNames = [];
                    key.split('.').forEach(function(chunk, index) {
                        if (index) {
                            inputNames.push('[' + chunk + ']');
                        } else {
                            inputNames.push(chunk);
                        }
                    });

                    let inputName = inputNames.join('');

                    const field = this.$validator.fields.find({
                        name: inputName,
                        scope: scope
                    });

                    if (field) {
                        this.$validator.errors.add({
                            id: field.id,
                            field: inputName,
                            msg: serverErrors[key][0],
                            scope: scope
                        });
                    }
                }
            },

            addFlashMessages: function() {
                if (window.flashMessages.alertMessage)
                    window.alert(window.flashMessages.alertMessage);
            },

            showModal: function(id) {
                this.$set(this.modalIds, id, true);
            },

            loadCategories: function() {
                this.$http
                    .get(`${this.baseUrl}/categories`)
                    .then(response => {
                        this.sharedRootCategories = response.data.categories;

                        $(
                            `<style type='text/css'> .sub-categories{ min-height:${ response.data.categories.length * 30 }px;} </style>`
                        ).appendTo('head');
                    })
                    .catch(error => {
                        console.error(`Failed to load categories:`, error);
                    });
            },

            addIntersectionObserver: function() {
                this.imageObserver = new IntersectionObserver(
                    (entries, imgObserver) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                const lazyImage = entry.target;
                                lazyImage.src = lazyImage.dataset.src;
                            }
                        });
                    }
                );
            },

            showLoader: function() {
                this.loading = true;
            },

            hideLoader: function() {
                this.loading = false;
            },
        }
    });
});
