// 메인 - 슬라이더 섹션
function main_swiper() {
	const main_visual_swiperID = document.querySelector('#js-main-visual-swiper');
	if (!main_visual_swiperID) return;

	const prop_effect = main_visual_swiperID.getAttribute('data-swiper-effect');
	const prop_delay = main_visual_swiperID.getAttribute('data-swiper-delay');
	const prop_autoplay = main_visual_swiperID.getAttribute('data-swiper-autoplay');
	const prop_pagination = main_visual_swiperID.getAttribute('data-swiper-pagination');
	const prop_height = main_visual_swiperID.getAttribute('data-swiper-height');
	if (prop_height == 'true') {
		prop_height_parm = {
			autoHeight: true
		}
	} else {
		prop_height_parm = {
			autoHeight: false
		}
	}
	const mainSwiperNavigations = main_visual_swiperID.querySelectorAll('.main-visual-swiper__navigation__next, .main-visual-swiper__navigation__prev');

	// Line mainSwiperProgressBar
	const mainSwiperProgressBar = main_visual_swiperID.querySelector('.main-visual-swiper__progress-line svg');
	// const mainSwiperProgressBarContent = main_visual_swiperID.querySelector('.main-visual-swiper__progress-line span');

	// Circle mainSwiperProgressBar
	const mainSwiperProgressCircle = main_visual_swiperID.querySelector('.main-visual-swiper__progress-circle svg');
	// const mainSwiperProgressCircleContent = main_visual_swiperID.querySelector('.main-visual-swiper__progress-circle span');

	const mainSwiper = new Swiper('#js-main-visual-swiper', {
		speed: 1000,
		prop_height_parm,
		slidesPerView: 1,
		loop: true,
		loopedSlides: 1,
		autoplay: {
			disableOnInteraction: false, // 쓸어 넘기거나 버튼 클릭 시 자동 슬라이드 정지 = true
			delay: parseInt(prop_delay)
		},
		roundLengths: true,
		parallax: true,
		effect: prop_effect, //slide, fade, cube, coverflow, flip, cards
		fadeEffect: {
			crossFade: false
		},
		flipEffect: {
			rotate: 30,
			slideShadows: false,
		},
		cubeEffect: {
			slideShadows: false,
		},
		pagination: {
			el: '.main-visual-swiper__pagination',
			clickable: true,
			type: 'bullets', //bullets, fraction
			dynamicBullets: false
		},
		navigation: {
			nextEl: '.main-visual-swiper__navigation__next',
			prevEl: '.main-visual-swiper__navigation__prev',
		},
		keyboard: {
			enabled: true,
			onlyInViewport: false,
		},
		on: {
			autoplayTimeLeft(s, time, progress) {
				if (mainSwiperProgressBar) {
					mainSwiperProgressBar.style.setProperty('--progress', 1 - progress);
					// mainSwiperProgressBarContent.textContent = `${Math.ceil(time / 1000)}s`;
				}
				if (mainSwiperProgressCircle) {
					mainSwiperProgressCircle.style.setProperty('--progress', 1 - progress);
					// mainSwiperProgressCircleContent.textContent = `${Math.ceil(time / 1000)}s`;
				}
			},
			slideChangeTransitionStart: function () {},
			transitionEnd: function () {}
		}
	});

	// console.log(mainSwiper);
	// console.log(mainSwiper.autoplay.paused);

	// autoplay 가 아니면
	if (prop_autoplay == 'N') {
		mainSwiper.autoplay.stop();
	}

	// Play/Pause control button
	const controlBtn = main_visual_swiperID.querySelector('.play-button-control');
	if (!controlBtn) return;
	controlBtn.addEventListener('click', function () {
		console.log(mainSwiper.progress);
		if (this.getAttribute('aria-pressed') === 'false') {
			mainSwiper.autoplay.stop();
			mainSwiperProgressBar.style.setProperty('--progress', 0);
			mainSwiperProgressCircle.style.setProperty('--progress', 0);
			//this.querySelector('.screen-reader-text').textContent = 'Play';
			this.querySelector('.play-button-text>i').classList.remove('xi-pause');
			this.querySelector('.play-button-text>i').classList.add('xi-play');
			this.setAttribute('aria-pressed', 'true');
		} else {
			mainSwiper.autoplay.start();
			//this.querySelector('.play-button-text').textContent = 'Pause';
			this.querySelector('.play-button-text>i').classList.remove('xi-play');
			this.querySelector('.play-button-text>i').classList.add('xi-pause');
			this.setAttribute('aria-pressed', 'false');
		}
	});
}

// 메인 - 프리미엄 섹션
function main_Premium() {
	const mainPremiumSection = document.querySelector('.main-premium');
	if (!mainPremiumSection) return;

	const mainPremium_autoplay_param = {
		delay: 7000,
		disableOnInteraction: true,
		pauseOnMouseEnter: true,
	};
	// 메인 - 프리미엄 좌측 슬라이더
	const mainPremiumLeft = new Swiper('#js-main-premium__content_swiper1', {
		loop: false,
		effect: 'slide',
		breakpoints: {
			640: {},
			768: {},
			1024: {
				loop: true,
				autoplay: mainPremium_autoplay_param,
			},
		},
	});
	// 메인 - 프리미엄 우측 슬라이더
	const mainPremiumRight = new Swiper("#js-main-premium__content_swiper2", {
		speed: 800,
		slidesPerView: 'auto',
		centeredSlides: false,
		loop: false,
		freeMode: false,
		spaceBetween: 16,
		autoplay: mainPremium_autoplay_param,
		effect: 'coverflow',
		initialSlide: 0, //시작위치값
		pagination: {
			el: ".swiper-pagination",
			clickable: true
		},
		navigation: {
			nextEl: ".main-premium-swiper-button-next",
			prevEl: ".main-premium-swiper-button-prev"
		},
		thumbs: {
			swiper: mainPremiumLeft,
		},
		breakpoints: {
			320: {
				effect: 'slide',
				slidesPerView: 'auto',
			},
			576: {
				effect: 'slide',
				slidesPerView: 2,
			},
			1024: {
				freeMode: false,
				slidesPerView: 'auto',
				centeredSlides: true,
				loop: true,
				spaceBetween: 30,
				effect: 'coverflow',
				coverflowEffect: {
					rotate: 30,
					stretch: 0,
					depth: 200,
					modifier: 1,
					slideShadows: true,
				},
				pagination: false,
			},
		},
	});
}

// 메인 - 탭스타일 섹션
$.fn.tabPlugin = function () {
	return this.each(function (index) {
		const $mainTab = $(this);
		const $mainTabButtons = $mainTab.find('.main-tab__buttons li');
		$mainTabButtons.eq(0).addClass('is-active');

		const $mainTabButtonsContainer = $mainTab.find('.main-tab__buttons').addClass(`main-tab__buttons_${index}`);
		// const mainTabButtonsSwiper = new Swiper(`.main-tab__buttons_${index}`, {
		// 	freeMode: true,
		// 	slidesPerView: "auto",
		// 	preventClicks: true,
		// 	preventClicksPropagation: false,
		// 	observer: true,
		// 	observeParents: true,
		// });

		const mainTabContentsSwiper = new Swiper($mainTab.find('.main-tab__contents')[0], {
			slidesPerView: 1,
		});

		$mainTabButtonsContainer.on('click', '.swiper-slide a', function (e) {
			e.preventDefault();
			const $item = $(this).parent();

			$mainTabButtonsContainer.find('.swiper-slide').removeClass('is-active');
			$item.addClass('is-active');

			centerTabItem($mainTabButtonsContainer, $item);
			mainTabContentsSwiper.slideTo($item.index());
		});

		mainTabContentsSwiper.on('slideChange', function () {
			const activeIndex = mainTabContentsSwiper.activeIndex;
			const $activeButton = $mainTabButtons.eq(activeIndex);

			$mainTabButtonsContainer.find('.swiper-slide').removeClass('is-active');
			$activeButton.addClass('is-active');

			centerTabItem($mainTabButtonsContainer, $activeButton);
		});

		const $activeItem = $mainTabButtonsContainer.find('.swiper-slide.is-active');
		if ($activeItem.length > 0) {
			centerTabItem($mainTabButtonsContainer, $activeItem);
		}

		function centerTabItem($container, $target) {
			const $wrapper = $container.find('.swiper-wrapper');
			const targetPos = $target.position();
			const containerWidth = $container.width();
			let newPosition = 0;

			const listWidth = $wrapper.find('.swiper-slide').toArray().reduce((total, slide) => total + $(slide).outerWidth(), 0);

			const selectTargetPos = targetPos.left + $target.outerWidth() / 2;
			newPosition = Math.min(Math.max(selectTargetPos - containerWidth / 2, 0), listWidth - containerWidth);

			$wrapper.css({
				"transform": `translate3d(${-newPosition}px, 0, 0)`,
				"transition-duration": "500ms"
			});
		}
	});
};

// 메인 - 섹션 sorting
function sortMainsection() {
	var sections = $('.layout__body-main'),
		section = sections.children('section');
	section.detach().sort(function (a, b) {
		var astts = $(a).data('sid');
		var bstts = $(b).data('sid')
		return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
	});
	sections.append(section);
}

(function ($) {
	if ($('#js-preloader').length === 0) {
		main_swiper();
	} else {
		setTimeout(main_swiper, 2000);
	}
	main_Premium();

	$(document).ready(function () {
		if (main_section_sort=='Y')
		{
			sortMainsection();
		}
		$('#js-main-premium-tab').tabPlugin();
		$('#js-main-tab').tabPlugin();
		$('#js-main-location-tab').tabPlugin();
	});

})(jQuery);