$(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()
	activateProductCustomBox()

	$('#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)
		activateProductCustomBox(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 activateProductCustomBox(boxHref = '') {
		if (boxHref === '') {
			$('.c-boxes .c-box').first().addClass('active')
		} else {
			$('.c-box', '.c-boxes').removeClass('active')
			$('.c-box[product=' + boxHref + ']', '.c-boxes').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]', {})
})