import Swiper from 'swiper/swiper-bundle';
require('./bootstrap');
require('./cart.js');

window.Vue = require('vue');

Vue.component('timeslot-picker', require('./components/TimeSlotPicker.vue').default);

const app = new Vue({
    el: '#app',
});


$(document).ready(function(){
    //document is ready we can free css transitions
    $('.preload').removeClass("preload");

	var mainslider = new Swiper ('.mainslider .swiper-container', {
		pagination: {
			el: '.mainslider__pagination',
			bulletClass: 'slider-bullet',
			bulletActiveClass: 'slider-bullet_active',
			clickable: true
		},
	});

	var rp_slider = new Swiper ('.rp-slider .swiper-container', {
		slidesPerView: 4,
		spaceBetween: 40,
		navigation: {
			nextEl: '.rp-slider .swiper-nav__arrow_next',
			prevEl: '.rp-slider .swiper-nav__arrow_prev',
			disabledClass: 'disabled'
		},
		breakpoints: {
/*			320: {
				spaceBetween: 20
			},
			480: {
				spaceBetween: 30
			},*/
			480: {
				slidesPerView: 'auto',
				spaceBetween: 12
			},
			768: {
				slidesPerView: 'auto',
				spaceBetween: 16
			},
			1000: {
				spaceBetween: 25,
				slidesPerView: 3
			},
			1180: {
				spaceBetween: 30
			}
		}
	});

	var rp_slider_mobile = new Swiper ('.related-products-mobile .swiper-container', {
		slidesPerView: 4,
		spaceBetween: 20,
		navigation: {
			nextEl: '.related-products-mobile .swiper-nav__arrow_next',
			prevEl: '.related-products-mobile .swiper-nav__arrow_prev',
			disabledClass: 'disabled'
		},
		breakpoints: {
/*			320: {
				spaceBetween: 20
			},
			480: {
				spaceBetween: 30
			},*/
			480: {
				slidesPerView: 'auto',
				spaceBetween: 12
			},
			768: {
				slidesPerView: 'auto',
				spaceBetween: 16
			},
			1000: {
				spaceBetween: 25,
				slidesPerView: 3
			},
			1180: {
				spaceBetween: 30
			}
		}
	});


	$(document).on("click", ".menu-trigger", function(){
		$(this).toggleClass("active");
		$(".menu").slideToggle();
	});

	$(document).on("click", ".product__qty-btn", function(){
		_value = parseInt($('.product__qty-input').val());
		if(isNaN(_value) || _value <= 0) {
			_value = 1;
		}

		if ($(this).hasClass('product__qty-btn_plus')) {
			_value += 1;
		} else {
			if(_value > 1) {
				_value -= 1;
			}
		}

		$('.product__qty-input').val(_value);
	});

	$(document).on("click", ".accordeon-block__title", function(){
		$(this).closest('.accordeon-block').toggleClass("active");
		$(this).next('.accordeon-block__content').slideToggle();
	});


	$(document).mouseup(function(e) {
    	var container = $(".form-message");

	    if (!container.is(e.target) && container.has(e.target).length === 0) {
	        container.hide();
	    }
	});

	$(document).mouseup(function(e) {
    	var container = $(".form-result");

	    if (!container.is(e.target) && container.has(e.target).length === 0) {
	        container.hide();
	    }
	});


	let fileInput = document.querySelector(".form__upload-field .file-source");
	if (fileInput) {
		let fileArea = document.querySelector(".form__upload-field .file-name");

		fileInput.onchange = function() {
		  if(fileInput.files.length != 0) {
		    if(fileInput.files[0].size > 10485760) {
		      fileArea.value = "La taille du fichier est trop grande";
		    } else {
		      fileArea.value = fileInput.files[0].name;
		    }
		  }
		}
	}





	$(document).on("click", ".tc-text__readmore", function(){
		$(this).closest('.tc-text').addClass("active");
		$(this).remove();
	});

    //cart close actions
    $('.basket-panel__close').on('click',closeCart);
    $('.basket-panel__mask').on('click',closeCart);
    //cart opened actions
    $('.promotion-description__labels').hover(showPromoInfo,hidePromoInfo);
    $('.basket-panel__content--smooth-scroll').on('scroll',toggleFixingBottomCart);
    $('.category-heading__header--collapsable').on('click',toggleProductCategory)
    $('.checkout-clear-basket__actions').on('click',showModalClearCart);
    $('#checkout-empty-basket-cancel').on('click',closeModalClearCart);

});