import $ from 'jquery';
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import ru from 'vee-validate/dist/locale/ru';
import tm from './lang/tm';
import axios from 'axios';
import VueSlider from 'vue-slider-component';
import OverlayLoader from './components/overlay-loader';
// import infiniteScroll from 'vue-infinite-scroll'
// import accounting from 'accounting';
// import ImageSlider from './components/image-slider';
import FlashWrapper from './components/flash-wrapper';
import Flash from './components/flash';
import GoTop from '@inotom/vue-go-top';
import 'lazysizes';

window.jQuery = window.$ = $;
window.Vue = Vue;
window.VeeValidate = VeeValidate;
window.axios = axios;

// require("./bootstrap");
// require("ez-plus/src/jquery.ez-plus.js");
// Vue.use(infiniteScroll);
Vue.use(VeeValidate, {
    dictionary: {
        ru: ru,
        tm: tm,
    },
    events: 'input|change|blur',
});

Vue.prototype.$http = axios;

window.eventBus = new Vue();

// Vue.component('image-slider', ImageSlider);
Vue.component('vue-slider', VueSlider);
Vue.component(
    'proceed-to-checkout',
    require('./components/checkout/proceed-to-checkout').default
);
// Vue.component('wishlist-component-with-badge', require('./components/header-compare-with-badge').default);
Vue.component('go-top', require('@inotom/vue-go-top').default);
Vue.component('flash-wrapper', FlashWrapper);
Vue.component('flash', Flash);
Vue.component('overlay-loader', OverlayLoader);
// Vue.filter('currency', function (value, argument) {
//     return accounting.formatMoney(value, argument);
// })

$(document).ready(function () {
    const app = new Vue({
        el: '#app',

        data: {
            modalIds: {},
            // data: [],
            show_loader: false,
            baseUrl: document.querySelector('meta[name="base-url"]').content,
        },

        mounted: function () {
            this.addServerErrors();
            this.addFlashMessages();

            this.$validator.localize(document.documentElement.lang);
        },

        methods: {
            onSubmit: function (e) {
                this.toggleButtonDisable(true);

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

                this.$validator.validateAll().then((result) => {
                    if (result) {
                        e.target.submit();
                    } else {
                        this.toggleButtonDisable(false);

                        eventBus.$emit('onFormError');
                    }
                });
            },
            validateForm(e, scope) {
                this.$validator.validateAll(scope).then((result) => {
                    if (result) {
                        scope.target.submit();
                    } else {
                        this.toggleButtonDisable(false);

                        eventBus.$emit('onFormError');
                    }
                });
            },
            toggleButtonDisable(value) {
                var buttons = document.getElementsByTagName('button');

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

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

                    var 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 () {
                const flashes = this.$refs.flashes;

                flashMessages.forEach(function (flash) {
                    flashes.addFlash(flash);
                }, this);
            },

            responsiveHeader: function () {},

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

            showLoader() {
                this.show_loader = true;
            },

            hideLoader() {
                this.show_loader = false;
            },
            // loadMore: function() {
            //     this.busy = true;
            //
            //     setTimeout(() => {
            //         for (var i = 0, j = 10; i < j; i++) {
            //             this.data.push({ name: count++ });
            //         }
            //         this.busy = false;
            //     }, 1000);
            // }
        },
    });

    window.app = app;
    // DESKTOP LANGUAGE SELECT ===================
    let langList = document.querySelector('.language-list');
    let langBlock = document.querySelector('.language-select');

    langBlock.addEventListener('mouseover', function () {
        langList.classList.remove('hidden');
    });
    langBlock.addEventListener('mouseout', function () {
        langList.classList.add('hidden');
    });

    const languageTriger = document.getElementById('language-dropdown');
    const languageDropdownContent = document.getElementById(
        'language-dropdown-content'
    );

    languageTriger.addEventListener('click', (event) => {
        languageDropdownContent.classList.toggle('active');
        event.stopPropagation();
    });

    document.addEventListener('click', function (event) {
        if (
            !languageTriger.contains(event.target) &&
            !languageDropdownContent.contains(event.target)
        ) {
            languageDropdownContent.classList.remove('active');
        }
    });

    // DESKTOP LANGUAGE SELECT end ===================

    // ACCORDION SCRIPT ========================== //
    let accordionTrigger = document.querySelectorAll('.footer-title-wrapper');
    let accordionElement = document.querySelectorAll('.footer-content');

    for (let i = 0; i < accordionTrigger.length; i++) {
        accordionTrigger[i].addEventListener('click', function () {
            accordionTrigger.forEach(function (item) {
                if (item !== accordionTrigger[i]) {
                    item.classList.remove('active');
                }
            });
            accordionElement.forEach(function (el) {
                if (el !== accordionElement[i]) {
                    el.classList.remove('visible');
                }
            });
            accordionTrigger[i].classList.toggle('active');
            accordionElement[i].classList.toggle('visible');
        });
    }

    const languageDropdown = document.getElementById('language-dropdown');

    // ACCORDION SCRIPT end ==========================

    // Review popup start ============================

    const popup = document.getElementById('review-popup');
    const openReviewPopupBtn = document.getElementById('openReviewPopupBtn');
    const closeReviewPopupBtn = document.getElementById('closeReviewPopupBtn');
    const closeReviewPopupBtn2 = document.getElementById(
        'closeReviewPopupBtn2'
    );
    const closeReviewPopupText = document.getElementById(
        'closeReviewPopupText'
    );

    const openPopup = () => {
        popup.style.display = 'flex';
        document.body.classList.add('no-scroll');
    };

    const closePopup = () => {
        popup.style.display = 'none';
        document.body.classList.remove('no-scroll');
    };

    openReviewPopupBtn.addEventListener('click', openPopup);
    closeReviewPopupText.addEventListener('click', closePopup);
    closeReviewPopupBtn.addEventListener('click', closePopup);
    closeReviewPopupBtn2.addEventListener('click', closePopup);

    window.addEventListener('click', (event) => {
        if (event.target === popup) {
            popup.style.display = 'none';
            document.body.classList.remove('no-scroll');
        }
    });

    // Review popup end ============================

    // BURGER SCRIPT ===============================
    //     let burgerTrigger = document.querySelector('.burger');
    //     let burgerElement = document.querySelector('.nav-inner-burger-container');
    //     let body = document.querySelector('body');
    //     let brokenTitle = document.querySelector('.burger-title-wrapper');
    //     let hrBurger = document.querySelector('.hr-line-burger');

    // burgerTrigger.addEventListener('click', function () {
    //     burgerElement.classList.remove('hidden-burger');
    //     body.style.overflow = 'hidden';
    //     brokenTitle.style.opacity = '100';
    //     hrBurger.style.opacity = '100';
    // });
    //
    // let burgerTriggerClose = document.querySelector('.burger-close');
    //
    // burgerTriggerClose.addEventListener('click', function () {
    //     burgerElement.classList.add('hidden-burger');
    //     body.style.overflow = 'auto';
    //     brokenTitle.style.opacity = '0';
    //     hrBurger.style.opacity = '0';
    // });

    // BURGER LANGUAGE ================================
    //     let langTrig = document.querySelector('.language-trig');
    //     langTrig.addEventListener('click', () => {
    //         langTrig.classList.toggle('triggered');
    //         currencyTrig.classList.remove('triggered');
    //     });
    // let currencyTrig = document.querySelector('.price-view');
    // currencyTrig.addEventListener('click', () => {
    //     langTrig.classList.remove('triggered');
    //     currencyTrig.classList.toggle('triggered');
    // });
    // BURGER LANGUAGE end ===========================
    // BURGER SCRIPT end ===============================

    // CAT DROPDOWN

    // const catParent = document.querySelector('.service-li.active');
    // const cat = document.querySelector('.cat-dropdown');

    // const lis = document.querySelectorAll('.cat-li');
    // const catBlock = document.querySelectorAll('.cat-data-block');

    // const numerator = (className) => {
    //     const items = document.querySelectorAll(`.${className}`);
    //     items.forEach((el, i) => {
    //         el.classList.add(`${className}-${i + 1}`);
    //         el.setAttribute('data-index', i + 1);
    //     });
    // };

    // numerator('cat-li');
    // numerator('cat-bg');
    // numerator('cat-data-block');

    // let checker = true;
    // let last;

    // catBlock.forEach((el) => {
    //     const imgPath = el.getAttribute('data-img');
    //     el.style.background = `linear-gradient(
    //     to right,
    //     rgba(255, 255, 255, 1),
    //     rgba(255, 255, 255, 0.4)
    // ),
    // url(${imgPath}), center, no-repeat`;
    //     el.style.backgroundSize = 'cover';
    // });

    // catParent.addEventListener('click', () => {
    // cat.classList.toggle('active');
    // if (checker) {
    //     catBlock[0].classList.toggle('active');
    //     lis[0].classList.toggle('active');
    //     checker = false;
    // } else {
    //     if (last) {
    //         catBlock[last].classList.toggle('active');
    //         lis[last].classList.toggle('active');
    //     } else {
    //         catBlock[0].classList.toggle('active');
    //         lis[0].classList.toggle('active');
    //     }
    // }
    // });

    // lis.forEach((el) => {
    //     el.addEventListener('click', () => {
    //         last = el.getAttribute('data-index') - 1;
    //         catBlock.forEach((el) => {
    //             el.classList.remove('active');
    //         });
    //         catBlock[last].classList.add('active');
    //         lis.forEach((el) => {
    //             el.classList.remove('active');
    //         });
    //         el.classList.add('active');
    //     });
    // });
});
