/** ==========================================================================
 *  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 DialogHandler from './components/DialogHandler';

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/ActivitySwiperNew');
require('./components/chocolateFactory');
require('./components/cookieHandler');
require('./components/mapsHandler');
require('./components/overlayMenuHandler');
require('./components/projectorHandler');
require('./components/ReadMore');
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.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.js-dialog-open').forEach(button => {

        const dialogIndex = button.getAttribute('data-dialog-index');

        const dialog = document.querySelector(`.js-dialog[data-dialog-index="${dialogIndex}"]`);

        const dialogHandler = new DialogHandler(dialog);

        button.addEventListener('click', (event) => {
            event.preventDefault();
            dialogHandler.openDialog();
        });
    });
});


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

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

const readMore = document.querySelector('.js-product-description-short');
const readMoreLong =  document.querySelector('.js-product-description-full');
const toggleButton = document.querySelector('.js-description-togglebutton');

if (readMore) {
    import(/* webpackChunkName: "reviews" */ "./components/ReadMore").then(({default: ReadMore}) => {
        new ReadMore(readMore, readMoreLong, toggleButton);
    })
}



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

let activitySwiperNew = document.querySelector('.js-main-activity-wrapper-swiper');
if (activitySwiperNew) {
    document.addEventListener('DOMContentLoaded', () => {
        import(/* webpackChunkName: "reviews" */ "./components/ActivitySwiperNew").then(({default: ActivitySwiperNew}) => {
            new ActivitySwiperNew(activitySwiperNew)

        })
    })
}

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);
    })
}