/** ==========================================================================
 *  Import ES6 Modules (https://webpack.js.org/api/module-methods/)
 *  =========================================================================*/

import { CheckoutDataController } from './components/checkoutDataController';
import CheckoutSummaryController from "./components/checkoutSummaryController";
import { Locations } from './components/Locations';
import axios from 'axios'

import {KAL} from '@komma/kal';
KAL.options.rootMargin = '0px 0px -100px 0px';
KAL.init();

window.axios = axios.create()
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
/** ==========================================================================
 *  Dependencies
 *  =========================================================================*/

/**
 * External
 */
require('hammerjs');
require('objectFitPolyfill');

/**
 * Global / Shared with KMS
 */
require('./../global/polyfills/eventPolyFill');
require('./../global/polyfills/isInteger');
require('./../global/polyfills/promise');
require('./../global/polyfills/remove');

/** ==========================================================================
 *  Global functionalities
 *  =========================================================================*/

require('./global/helpers'); // Should be first
require('./global/browserHandler');
require('./global/scrollHandler');
require('./global/toggleHandler');

/** ==========================================================================
 *  Component functionalities
 *  =========================================================================*/

require('./components/categoryHandler');
require('./components/chocolateFactory');
require('./components/cookieHandler');
require('./components/mapsHandler');
require('./components/overlayMenuHandler');
require('./components/projectorHandler');
require('./components/scrollToHandler');
require('./components/locationMapHandler');
require('./components/toggleHandler');
require('./components/youtubeHandler');
require('./components/datePickerHandler');
// require('./components/modalHandler');
require('./components/searchFormHandler');
require('./components/customerLogoSliderHandler');

new CheckoutDataController();

document.querySelectorAll('.js-locations').forEach((parentElement) => new Locations(parentElement));

/** ==========================================================================
 *  Vue Shopping Cart
 *  =========================================================================*/
import { createApp, ref } from 'vue'
import {appendTranslations} from "./services/useTranslations"

let shoppingCartEl = document.querySelector('.js-cart');
if (shoppingCartEl) {
    import(/* webpackChunkName: "cart" */ "./components/ShoppingCart").then(({default: ShoppingCart}) => {
        new ShoppingCart(shoppingCartEl)
    })
}

let activitiesEl = document.querySelector('.js-activities');
if (activitiesEl) {
    import(/* webpackChunkName: "activity" */ "./components/ActivitySwiper").then(({default: ActivitySwiper}) => {
        new ActivitySwiper(activitiesEl)
    })
}

let reviewSliderEl = document.querySelector('.js-review-slider');
if (reviewSliderEl) {
    import(/* webpackChunkName: "reviews" */ "./components/ReviewSwiper").then(({default: ReviewSwiper}) => {
        new ReviewSwiper(reviewSliderEl)
    })
}


let checkoutSummaryFormEl = document.querySelector('.js-checkout-summary');
if (checkoutSummaryFormEl) {
    import(/* webpackChunkName: "checkoutSummary" */ "./components/checkoutSummaryController").then(({default: CheckoutSummary}) => {
        new CheckoutSummary(checkoutSummaryFormEl)
    })
}

let productImageSwiper = document.querySelector('.js-product-image-slider');
if (productImageSwiper) {

    import(/* webpackChunkName: "reviews" */ "./components/ProductImageSwiper").then(({default: ProductImageSwiper}) => {
        new ProductImageSwiper(productImageSwiper)
    })
}

let activeProduct = ref(null);
let sessionDate = ref(null);
let sessionLocation = ref(null);

let planModal = document.getElementById('planModal')
let planButtons = document.querySelectorAll('.js-plan-popup');

if(planButtons.length > 0) {
    if(!planModal) throw new Error('Plan buttons found but Plan modal element is missing')

    if(planModal.dataset.location) sessionLocation.value = planModal.dataset.location
    if(planModal.dataset.date) sessionDate.value = planModal.dataset.date

    appendTranslations(JSON.parse(planModal.dataset.translations))
    delete planModal.dataset.translations

    import(/* webpackChunkName: "booking" */ "./components/PlanModal").then(({default: PlanModal}) => {

        planButtons.forEach((button) => {

            button.addEventListener('click', function () {

                const clickProductId = parseInt(event.currentTarget.dataset.productId)

                if(activeProduct.value === clickProductId) activeProduct.value = null
                else activeProduct.value = clickProductId
            })
        })

        createApp({
            components: {PlanModal},
            data() {
                return {
                    activeProduct,
                    sessionDate,
                    sessionLocation,
                }
            }
        }).mount(planModal);
    })
}