$(function () {
	if ($('.illustration_product_slider').length) {
		var swiperProductSlider = new Swiper('.illustration_product_slider', {
			pagination: {
				el: '.swiper-pagination',
				type: 'progressbar',
			},
			navigation: {
				nextEl: '.swiper-slide-next',
				prevEl: '.swiper-slide-prev',
			},
		})
	}
})

$(function () {
	$('#nav_tabs li').first().addClass('active')
	var productList = $('#product-preview-box .scontainer-content')
	$('.product-preview', productList).first().addClass('active')
	activateProductColors()
	activateProductDrafts()
	activateProductBanner()

	$('#nav_tabs li a').on('click', function (event) {
		event.preventDefault()
		var boxHref = $(this).attr('href').substring(1)
		$(this).parent().parent().find('li').removeClass('active')
		$(this).parent().addClass('active')

		activateProductBox(boxHref)
		activateProductColors(boxHref)
		activateProductDrafts(boxHref)
		activateProductBanner(boxHref)

		if ($(this).attr('colors')) {
			$('#product-colors-preview-box').show();
			let colorsArr = $(this).attr('colors').split(' ');
			activateProductColorsTabs(colorsArr);
		} else {
			$('#product-colors-preview-box').hide();
		}
	})

	function activateProductBox(boxHref) {
		$('.product-preview', productList).removeClass('active')
		$(productList).find(`#${boxHref}`).addClass('active')
	}

	function activateProductColors(boxHref = '') {
		if (boxHref === '') {
			$('#product-colors-box .product-colors').first().addClass('active')
		} else if ($('#product-colors-box .product-colors').length > 1) {
			$('#product-colors-box .product-colors').removeClass('active')
			$('#product-colors-box .product-colors').each(function () {
				if ($(this).attr('model') === boxHref) {
					$(this).addClass('active')
				}
			})
		}
	}
	function activateProductDrafts(boxHref = '') {
		if (boxHref === '') {
			$('#product-drafts-box .product-drafts').first().addClass('active')
		} else if ($('#product-drafts-box .product-drafts').length > 1) {
			$('#product-drafts-box .product-drafts').removeClass('active')
			$('#product-drafts-box .product-drafts').each(function () {
				if ($(this).attr('model') === boxHref) {
					$(this).addClass('active')
				}
			})
		}
	}
	function activateProductBanner(boxHref = '') {
		if (boxHref === '') {
			$('#product-banners-box .product-banner').first().addClass('active')
		} else if ($('#product-banners-box .product-banner').length > 1) {
			$('#product-banners-box .product-banner').removeClass('active')
			$('#product-banners-box .product-banner').each(function () {
				if ($(this).attr('model') === boxHref) {
					$(this).addClass('active')
				}
			})
		}
	}

	function activateProductColorsTabs(colors) {
		console.log(colors);
		
		if (colors && typeof colors === 'object') {
			$('#nav_tabs_colors li').each(function() {
				var href = $(this).find('a').attr('href').substring(1);
				if (!colors.includes(href)) {
					$(this).hide();
				} else {
					$(this).show();
				}
			});

			let firstVisible = $('#nav_tabs_colors li:visible').first();
			if (firstVisible.length > 0) {
				firstVisible.find('a').trigger('click');
			}
		}
	}

	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	var productColorsList = $("#product-colors-preview-box .scontainer-content")

	$("#nav_tabs_colors li a").on("click", function (e) {
		e.preventDefault()

		var boxColorHref = $(this).attr("href").substring(1)
		$(this).parent().parent().find("li").removeClass("active")
		$(this).parent().addClass("active")

		activateProductColorsBox(boxColorHref)
	})

	$("#nav_tabs_colors li").first().addClass("active")
	$(".colors-preview", productColorsList).first().addClass("active")

	function activateProductColorsBox(boxColorHref) {
		$(".colors-preview", productColorsList).removeClass("active")
		$(productColorsList).find(`#${boxColorHref}`).addClass("active")
	}
})

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


$(document).ready(function () {
	$('#product-colors-box img').each(function () {
		var img = $(this)
		var src = img.attr('data-src')
		img.wrap('<a href="' + src + '" data-fancybox></a>')
	})

	Fancybox.bind('[data-fancybox]', {})
})