const slideshowObj = {
	navElement: "button",
	navText: ["prev", "next"],
	loop: true,
	dots: true,
	margin: 10,
	items: 1,
	autoplay: true,
	autoplayTimeout: 7500,
	autoplayHoverPause: true,
	responsive: {
		0: {
			nav: false
		},
		750: {
			nav: true
		}
	}
};

// 主選單開關
(function($) {
	let menuStep = 0;
	$("body").on("click", ".menu-toggle", function(e) {
		menuStep = (menuStep + 1) % 2;

		if (menuStep) {
			$("body").addClass("menu-open");
		} else {
			$("body").removeClass("menu-open");
		}
	});
})($);

// 折疊選單開關
(function($) {
	$(".navbar").on("click", ".with-child > .link", function(e) {
		if($(window).width() < 975) {
			e.preventDefault();
			$(this)
				.parent(".with-child")
				.toggleClass("in-active");
		}
	});
	$("main").on("click", ".with-child > .link", function(e) {
		e.preventDefault();
		$(this)
			.parent(".with-child")
			.toggleClass("in-active");
	});
})($);

// top banner 廣告區塊設定
(function($) {
	$(".top-banner").each(function(i, item) {
		if ($(item).children(".item").length > 1) {
			$(item)
				.addClass("owl-carousel")
				.owlCarousel(slideshowObj)
				.trigger('refresh.owl.carousel');
		}
	});
})($);





// ==========================================================
// 	側邊選單開關
// ==========================================================
;(function($) {
    $('.page-aside').on('click', '.closer', function(e) {
    	$(this).parent('.page-aside').toggleClass('aside-open');
    })
})($)



// 問卷答案蒐集
const questResult = {};
let slideStep = 0;
const slideAmount = $(".topic-box").length;

function setResult(selector, result) {
	const keyword = $(selector)
		.parents(".topic-box")
		.data("keyword");
	if (keyword) {
		questResult[keyword] = result;
	}
	// console.log(questResult);
}
function deleteResult(selector) {
	const keyword = $(selector)
		.parents(".topic-box")
		.data("keyword");
	delete questResult[keyword];
	// console.log(questResult);
}
function slideShow(selector, index, activeClass) {
	const keyword = data[index].keyword;
	$(selector + "[data-keyword=" + keyword + "]")
		.addClass(activeClass)
		.siblings(selector)
		.removeClass(activeClass);

	// console.log(selector + "[data-keyword=" + keyword + "]")
}
function leftArrowCheck(index) {
	if (index === 0) {
		$(".nav-left").addClass("in-disabled");
	} else {
		$(".nav-left").removeClass("in-disabled");
	}
}
function rightArrowCheck(index) {
	const keyword = $(".in-show").data("keyword");
	if (index === slideAmount - 1 || questResult[keyword] === undefined) {
		$(".nav-right").addClass("in-disabled");
	} else {
		$(".nav-right").removeClass("in-disabled");
	}
	// console.log(questResult[keyword])
}
function submitCheck(index) {
	const keyword = $(".in-show").data("keyword");
	if (index === slideAmount - 1 && questResult[keyword] !== undefined) {
		$(".btn-submit").addClass("show-submit");
	} else {
		$(".btn-submit").removeClass("show-submit");
	}
}
function titleWrite(index) {
	$(".topic-title")
		.empty()
		.append(data[index].title);

	if (data[index].subTitle && $(".topic-string").length) {
		$(".topic-string").text(data[index].subTitle);
	}
}
function progressBar(outerSelector, innterSelector) {
	const keyword = $(".in-show").data("keyword");
	const target = $(outerSelector);
	const maxValue = slideAmount;
	let stepValue = 0;

	if (questResult[keyword] === undefined) {
		stepValue = slideStep;
	} else {
		stepValue = slideStep + 1;
	}
	$(".box-now").text(stepValue);
	$(".box-total").text(maxValue);

	target.children(innterSelector).css({
		width: `${(stepValue / maxValue) * 100}%`
	});
}
function btnCheck(index) {
	leftArrowCheck(index);
	rightArrowCheck(index);
	submitCheck(index);
	progressBar(".progress-base", ".progress-bar");
}

// =========================================================
//  問卷整體 nav 動作
// =========================================================
(function($) {
	
	$(".nav-right").on("click", function(e) {
		if (!$(".nav-right").hasClass("in-disabled")) {
			if (slideStep < slideAmount - 1) {
				slideStep += 1;
				slideShow(".topic-box", slideStep, "in-show");
				$(window).trigger("resize");
			} else {
				slideStep = slideAmount - 1;
			}
			btnCheck(slideStep);
			titleWrite(slideStep);
		}
	});
	

	
	$(".nav-left").on("click", function(e) {
		if (!$(".nav-left").hasClass("in-disabled")) {
			if (slideStep > 0) {
				slideStep += -1;
				slideShow(".topic-box", slideStep, "in-show");
				$(window).trigger("resize");
			} else {
				slideStep = 0;
			}
			btnCheck(slideStep);
			titleWrite(slideStep);
		}
	});
	

	// 問卷 init
	if(data) {
		slideShow(".topic-box", slideStep, "in-show");
		btnCheck(slideStep);
		titleWrite(slideStep);
	}
})($);

// =========================================================
//  通用多選內容
// =========================================================
function multipleSelect(outerSelector, innerSelector) {
	$(outerSelector).each(function(i, item) {
		const result = [];
		const limit = $(item).data("limit");
		const wrapper = $(item).parents(".topic-box");

		$(item).on("click", innerSelector, function(e) {
			const $this = $(this);
			const thisValue = $this.data("value");
			const searchValue = result.indexOf(thisValue);
			const target = wrapper.find(".be-skip-check");

			target.prop("checked", false);

			// 確認該選項是否已經點選過
			if (searchValue !== -1) {
				$this.removeClass("in-active");
				result.splice(searchValue, 1);
			} else {
				result.push(thisValue);
				$this.addClass("in-active");
			}

			if (result.length > limit) {
				const outValue = result.shift();
				$(
					innerSelector + '[data-value="' + outValue + '"]'
				).removeClass("in-active");
			}

			if (result.length === 0) {
				deleteResult(item);
			} else {
				setResult(item, result);
			}
			if(limit === 1) {
				if (slideStep < slideAmount - 1) {
					slideStep += 1;
					slideShow(".topic-box", slideStep, "in-show");
					$(window).trigger("resize");
				} else {
					slideStep = slideAmount - 1;
				}
				btnCheck(slideStep);
				titleWrite(slideStep);
			} else if(limit > 1) {
				btnCheck(slideStep);
			}

		});

		if(limit > 1) {
			wrapper.on("click", ".be-skip-check", function(e) {
				if ($(this).prop("checked")) {
					$(innerSelector).removeClass("in-active");
					result.length = 0;
					setResult(item, "skip");
				} else {
					deleteResult(item);
				}
				btnCheck(slideStep);
			});
		}
	});
}

// 無圖選擇區塊
multipleSelect(".topic-nopic", ".topic-nopic-item");

// 長條圖選擇區塊
multipleSelect(".topic-barpic", ".topic-barpic-item");

// 小圖選擇區塊
multipleSelect(".topic-smallpic", ".topic-smallpic-item");

// 大圖選擇區塊
multipleSelect(".topic-bigpic", ".topic-bigpic-item");

// =============================
//  圓環圖
// =============================
(function($) {
	const donutValue = $(".donut-value");
	const wrapper = donutValue.parents(".topic-box");
	const skipTarget = wrapper.find(".be-skip-check");

	function setTime(inputSelector, donutSelector) {
		let hourVal = $(inputSelector).val();
		hourVal = Math.round(hourVal);
		if (hourVal > 12) {
			hourVal = 12;
		} else if (hourVal < 0) {
			hourVal = 0;
		}
		$(donutSelector).attr("data-hour", hourVal);
		$(inputSelector).val(hourVal);

		if (hourVal === 0) {
			deleteResult(inputSelector);
		} else {
			setResult(inputSelector, hourVal);
		}
		btnCheck(slideStep);
	}

	donutValue.val($(".donut-pic").data("hour"));
	donutValue.on("keyup", function(e) {
		setTime(".donut-value", ".donut-pic");
	});
	donutValue.on("change", function(e) {
		setTime(".donut-value", ".donut-pic");
	});
	donutValue.on("focus", function(e) {
		skipTarget.prop("checked", false);
		$(this).select();
	});

	skipTarget.on("click", function(e) {
		if ($(this).prop("checked")) {
			donutValue.val(0);
			$(".donut-pic").attr("data-hour", 0);
			setResult(".donut-value", "skip");
		} else {
			deleteResult(".donut-value");
		}
		btnCheck(slideStep);
	});
})($);





// =========================================================
//  progress bar、圖片連動
// =========================================================
(function($) {
	const maxValue = $(".topic-slide-item").length;
	const slideRange = $(".slide-range");
	const wrapper = slideRange.parents(".topic-box");
	const skipTarget = wrapper.find(".be-skip-check");
	let prevHeight = 0;

	function rangeValue() {
		const targetIndex = slideRange.val() - 1;
		$(".topic-slide-item")
			.removeClass("in-active")
			.removeClass("in-step");
		$(".topic-slide-item")
			.eq(targetIndex)
			.addClass("in-active");

		if (targetIndex - 1 >= 0) {
			$(".topic-slide-item")
				.eq(targetIndex - 1)
				.addClass("in-step");
		}
		if (targetIndex + 1 <= maxValue) {
			$(".topic-slide-item")
				.eq(targetIndex + 1)
				.addClass("in-step");
		}

		setResult(".topic-slide-item", slideRange.val());
	}

	// 滑塊圖片樣式
	$(window).on("resize", function(e) {
		const newHeight = $(".topic-slide-item.in-active > img").height();

		if (newHeight === 0) {
			$(".topic-slide-item.in-active > img").on("load", function(e) {
				$(".topic-slide").css({
					height: $(".topic-slide").height()
				});
			});
		} else if (newHeight !== prevHeight) {
			$(".topic-slide").css({
				height: newHeight
			});

			prevHeight = newHeight;
		}
	});

	// range 拉條
	$(".slide-range").attr("max", maxValue);
	$(".slide-range").on("change", function(e) {
		skipTarget.prop("checked", false);
		rangeValue();
		btnCheck(slideStep);
	});

	// range 下方文字資料
	const detailNum = $(".range-detail-item").length;
	const detailWidth = (100 - 2 * (detailNum - 1)) / (detailNum - 1);
	$(".range-detail-item").css({
		width: detailWidth + "%"
	});

	$(".range-detail-item:first-child, .range-detail-item:last-child").css({
		width: detailWidth / 2 + "%"
	});

	// skip function
	skipTarget.on("click", function(e) {
		if ($(this).prop("checked")) {
			slideRange.val(1);
			$(".topic-slide-item")
				.removeClass("in-active")
				.removeClass("in-step");
			$(".topic-slide-item")
				.eq(0)
				.addClass("in-active");
			$(".topic-slide-item")
				.eq(1)
				.addClass("in-step");

			setResult(".slide-range", "skip");
		} else {
			setResult(".slide-range", "1");
		}
	});

	// function init
	rangeValue();
	$(window).trigger("resize");
	btnCheck(slideStep);
})($);





// ==========================================================
// 	點擊滑動到定位
// ==========================================================
;(function($) {
    $('body').on('click', 'a', function(e) {
    	const hashValue = $(this).attr('href')
    	if(hashValue.match(/^#/) && hashValue !== '#') {
    		e.preventDefault()

    		if($(hashValue).length) {
    			const offsetTop = $(hashValue).offset().top - $('.header').outerHeight()

    			$('body, html').animate({
    				scrollTop: offsetTop,
    			}, 750);
    		}
    	} else if(hashValue === '#') {
    		e.preventDefault()

    		$('body, html').animate({
				scrollTop: 0,
			}, 750);
    	}
    })
})($)





// ==========================================================
// 	瀑布流設定
// ==========================================================
;(function($) {
    if($('.preview-box').length && $('.preview-box').children('.item').length) {
    	$('.preview-box').masonry({
    		itemSelector: '.item',
    		percentPosition: true,
    		columnWidth: '.item-grid',
    		gutter: '.item-gutter',
    	})
    }
})($)





// ==========================================================
// 	slideshow
// ==========================================================
;(function($) {
    $('.slideshow').each(function(i, item) {
    	if($(item).children().length > 1) {
    		$(item)
	    		.addClass('owl-carousel')
	    		.owlCarousel(slideshowObj)
	    		.trigger('refresh.owl.carousel')
    	}
    });
})($)





// ==========================================================
// 	lookbook
// ==========================================================
function getLookbook(id) {
	$.ajax({
		url: '/questionnaire/ajax/ajax_index_lookbook.php',
		type: 'POST',
        cache:false,
        async:false,
		dataType: 'json',
		data: {id: id},
	})
	.done(function(res) {
		$('#lookbookEditor').html(res.content)
	})
	.fail(function(err) {
		console.log(err);
	})
}
;(function($) {
    $('.lookbook').each(function(i, item) {
    	if($(item).length) {
    		$(item).addClass('owl-carousel').owlCarousel({
				navElement: "button",
				navText: ["prev", "next"],
    			margin: 0,
    			loop: true,
    			dots: false,
    			autoplay: true,
    			autoplayTimeout: 7500,
    			autoplayHoverPause: true,
    			responsive: {
    				0: {
    					items: 1,
    					nav: false,
    				},
    				750: {
    					items: 2,
    					nav: true,
    				},
    			},
    		})
    		$(item).on('translated.owl.carousel', function(e) {
    			const targetID = $(this).find('.owl-item').eq(e.item.index).find('.item').data('id')
    			getLookbook(targetID)
    		})
    	}
    })
})($)





// ==========================================================
// 	article list
// ==========================================================
;(function($) {
    $('.article-list').each(function(i, item) {
    	if($(item).children('.item').length > 1) {
    		$(item).addClass('owl-carousel').owlCarousel({
				navElement: "button",
				navText: ["prev", "next"],
    			margin: 0,
    			loop: true,
    			dots: false,
    			autoplay: true,
    			autoplayTimeout: 5000,
    			autoplayHoverPause: true,
				nav: true,
    			responsive: {
    				0: {
    					items: 1,
    				},
    				525: {
    					items: 2,
    				},
    				750: {
    					items: 3,
    				},
    			},

    		})
    	}
    })
})($)





// ==========================================================
// 	gotop 顯示樣式
// ==========================================================
;(function($) {
    $(window).on('scroll', function(e) {
    	const winHeight = $(this).height()
    	const winTop = $(this).scrollTop()
    	const gotopHeight = $('.gotop').height()
    	const footerTop = $('.footer').offset().top
    	const limitTop = footerTop - winHeight + gotopHeight / 2 + 15
    	let gotopCSS = 0

    	if(winTop > 0) {
    		$('.gotop').addClass('in-show')
    	} else {
    		$('.gotop').removeClass('in-show')
    	}

    	if(winTop > limitTop) {
			gotopCSS = footerTop - gotopHeight / 2
    	} else {
    		gotopCSS = winTop + winHeight - gotopHeight - 15
    	}
    	$('.gotop').css({
    		top: gotopCSS,
    	});
    }).trigger('scroll')
})($)






// ==========================================================
// 	modal function
// ==========================================================
;(function($) {
    $('body').on('click', '[data-modal]', function(e) {
    	e.preventDefault()

    	let modalContent = ''
    	if($(this).data('modal') === 'video') {
    		const modalEmbed = $(this).attr('href')
    		const embedPath = 'https://www.youtube.com/embed/'
    		let embedString = ''

    		if(modalEmbed.indexOf('//www.youtube.com/watch?') !== -1) {
				const idIndex = modalEmbed.indexOf('v=')
				const propStr = modalEmbed.slice(idIndex)
				const strArray = propStr.split('&')
				const videoArray = strArray.reduce((prev, ele) => {
					if(ele.indexOf('v=') !== -1) {
						prev.push(ele)
					}
					return prev
				}, [])

				embedString = embedPath + videoArray[0].slice(2)

    		} else if(modalEmbed.indexOf('//youtu.be/') !== -1) {
    			const indexStart = modalEmbed.indexOf('/youtu.be/') + 10
				const indexEnd = modalEmbed.indexOf('?')
				let embedID = ''

				if(indexEnd !== -1) {
					embedID = modalEmbed.slice(indexStart, indexEnd)
				} else {
					embedID = modalEmbed.slice(indexStart)
				}

    			embedString = embedPath + embedID
    		} else if(modalEmbed.indexOf('//www.youtube.com/embed/') !== -1) {
    			const indexEnd = modalEmbed.indexOf('?')

    			if(indexEnd !== -1) {
    				embedString = modalEmbed.slice(0, indexEnd)
    			} else {
	    			embedString = modalEmbed
    			}
    		}


			modalContent = `
<div class="modal-embed inner">
	<iframe src="${embedString}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
			`
    	}
    	const modalDOM = `
<div class="modal-wrapper">
	<button class="modal-closer" type="button">close</button>
	<div class="modal-content">
		${modalContent}
	</div>
</div>`
		console.log(modalDOM)
		$('body').addClass('modal-hidden').append(modalDOM)
    })

    $('body').on('click', '.modal-wrapper .modal-closer', function(e) {
    	$(this).parents('.modal-wrapper').remove()
    	$('body').removeClass('modal-hidden')
    })
})($)