/* ============================================================
top
============================================================ */

$(function() {

	/* slider */

	const $mv = $('main div.mv');
	const $slide = $mv.find('ul.slide');

	$mv.append('<div class="ctrl"><p><button type="button" class="stop"></button><button type="button" class="play"></button></p></div>');

	$slide.slick({
		autoplay: true,
		autoplaySpeed: 5000,
		infinite: true,
		dots: true,
		arrows: true,
		centerMode: true,
		variableWidth: true,
		slidesToShow: 1,
		slidesToScroll: 1,
		prevArrow: '<button type="button" class="sa sap"></button>',
		nextArrow: '<button type="button" class="sa san"></button>',
		appendDots: $mv.find('div.ctrl'),
		pauseOnFocus: false,
		pauseOnHover: false,
		pauseOnDotsHover: false,
	});

	$slide.on('touchmove', function(event, slick, currentSlide, nextSlide){
		$slide.slick('slickPlay');
	});

	$slide.find('li.slick-slide').wrapInner('<div></div>');

	$('main ul.slick-dots li').append(
		'<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="47" transform="rotate(-90 50 50)" pointer-events="all" stroke="#ffffff" stroke-width="6" fill="none"/></svg>'
	);

	const $dots = $mv.find('ul.slick-dots');

	$mv.find('button.stop').on('click', function() {
		$(this).parent('p').addClass('stop');
		$slide.slick('slickPause');
		$dots.addClass('stop');
	});

	$mv.find('button.play').on('click', function() {
		$(this).parent('p').removeClass('stop');
		$slide.slick('slickNext').slick('slickPlay');
		$dots.removeClass('stop');
	});

	$dots.find('li.slick-active').addClass('on');

	$slide.on('afterChange', () => {
		$dots.find('li.slick-active').addClass('on');
	});

	$mv.on('click', 'li.slick-slide > div', function(e) {
		if (!$(e.target).closest('button').length) {
			const link = $(this).find('a').attr('href');
			if (link) window.location.href = link;
		}
	});

	/* about */

	$('main div.about p').wrapAll('<div></div>');

	/* category sort */

	const $panel = $('main div.panel');
	const $panelList = $panel.find('> ul');
	const $category = $('main div.category');

	$panelList.children('li').each(function() {
		const cnArray = $(this).find('button').map(function() {
			return $(this).attr('class');
		}).get();
		$(this).addClass(cnArray.join(' ')).attr('data-groups', cnArray);
	});

	const Shuffle = window.Shuffle;
	const shuffleInstance = new Shuffle($panelList[0], {
		itemSelector: 'main div.panel > ul > li',
		delimiter: ',',
		gutterWidth: 32,
	});

	const aysID = sessionStorage.getItem('aysID');
	const cat = sessionStorage.getItem('cat');

	if (cat || aysID) {
		$('html,body').animate({ scrollTop: $category.offset().top });
	}

	if (aysID) {
		shuffleInstance.filter(aysID);
		$category.find('li').removeClass('current')
			.has(`button.${aysID}`).addClass('current');
	} else {
		shuffleInstance.filter(Shuffle.ALL_ITEMS);
	}

	$panelList.children('li').each(function(i) {
		if (!$(this).attr('data-shuffle-sid')) {
			$(this).attr('data-shuffle-sid', 's' + i);
		}
	});

/* 
	let lastVisibleIds = null;

	shuffleInstance.on(Shuffle.EventType.LAYOUT, () => {
		setTimeout(() => {
			const visibleIds = $panelList.children('li').filter(function() {
				const $el = $(this);
				const op = parseFloat($el.css('opacity'));
				return $el.is(':visible') && (isNaN(op) ? true : op > 0.1);
			}).map(function() {
				return $(this).attr('data-shuffle-sid');
			}).get();

			if (lastVisibleIds !== null) {
				const isSame =
					visibleIds.length === lastVisibleIds.length &&
					visibleIds.every((v, i) => v === lastVisibleIds[i]);

				if (isSame) {
					console.log('同一表示');
					setTimeout(() => console.clear(), 500);
				}
			}

			lastVisibleIds = visibleIds;
		}, 150);
	});
 */

	$(document).on('click',
		'main div.category button, main div.mv li.slick-slide button, main div.panel li button',
		function() {
			const className = $(this).attr('class') || 'all';
			shuffleInstance.filter(className);

			$('html,body').animate({ scrollTop: $category.offset().top });
			$category.find('li').removeClass('current')
				.has(`button.${className}`).addClass('current');

			$('div.panel p.sp').hide();
			$panelList.children('li:nth-child(n+5)').show();
		});

	/* show-more (sp only) */

	const setPanelHeight = () => {
		if (window.matchMedia("(max-width: 899px)").matches) {
			const totalHeight = $panelList.children('li:nth-child(-n+4)')
				.toArray().reduce((sum, li) => sum + $(li).outerHeight(true), 0);
			const padding = parseInt($panel.css('padding-top')) + parseInt($panel.css('padding-bottom')) || 0;
			$panel.height(totalHeight + padding - 1);
		} else {
			$panel.css('height', 'auto');
		}
	};

	if ($panelList.children('li').length >= 5) {
		$panel.after('<p class="show-more sp"><button type="button">もっと見る</button></p>');
	}

	if (aysID) {
		$('main p.show-more').remove();
		$panel.addClass('full');
	} else {
		setPanelHeight();
	}

	$(window).on('load resize', setPanelHeight);

	$(document).on('click', 'main p.show-more button', function() {
		$panel.addClass('full');
		$('main p.show-more').hide();
	});

	$(document).on('click', 'main div.category li:first-child button', function() {
		$(this).parent('li').addClass('current');
	});

	$(document).on('click', 'main div.category button, main div.panel li button, main div.mv li.slick-slide button', function() {
		$('main p.show-more').remove();
		$panel.addClass('full');
	});

	/* remove sessionStorage */

	setTimeout(() => {
		sessionStorage.removeItem('aysID');
		sessionStorage.removeItem('cat');
	}, 500);

});