const jQueryBridget = require('jquery-bridget');
const Isotope = require('isotope-layout');

export default {
	init() {
		// JavaScript to be fired on the catalog page
		(function() {
			// Get all the <h2> headings
			const headings = document.querySelectorAll('fieldset h2');

			Array.prototype.forEach.call(headings, heading => {
				// Give each <h3> a toggle button child
				heading.innerHTML = `
				<button type="button" aria-expanded="false">
					${heading.textContent}
					<svg aria-hidden="true" focusable="false" class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="currentColor" fill-rule="evenodd"></path></svg>
				</button>
			  `;

				// Function to create a node list
				// of the content between this <h2> and the next
				const getContent = elem => {
					let elems = [];
					while (
						elem.nextElementSibling &&
						elem.nextElementSibling.tagName !== 'H2'
					) {
						elems.push(elem.nextElementSibling);
						elem = elem.nextElementSibling;
					}

					// Delete the old versions of the content nodes
					elems.forEach(node => {
						node.parentNode.removeChild(node);
					});

					return elems;
				};

				// Assign the contents to be expanded/collapsed (array)
				let contents = getContent(heading);

				// Create a wrapper element for `contents` and hide it
				let wrapper = document.createElement('div');
				wrapper.hidden = true;

				// Add each element of `contents` to `wrapper`
				contents.forEach(node => {
					wrapper.appendChild(node);
				});

				// Add the wrapped content back into the DOM
				// after the heading
				heading.parentNode.insertBefore(wrapper, heading.nextElementSibling);

				// Assign the button
				let btn = heading.querySelector('button');

				btn.onclick = () => {
					// Cast the state as a boolean
					let expanded = btn.getAttribute('aria-expanded') === 'true' || false;

					// Switch the state
					btn.setAttribute('aria-expanded', !expanded);
					// Switch the content's visibility
					wrapper.hidden = expanded;
				};
			});
		})();

		(function() {
			// Get all the <h3> headings
			const headings = document.querySelectorAll('fieldset h3');

			Array.prototype.forEach.call(headings, heading => {
				// Give each <h3> a toggle button child
				heading.innerHTML = `
				<button type="button" aria-expanded="false">
					${heading.textContent}
					<svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="currentColor" fill-rule="evenodd"></path></svg>
				</button>
			  `;

				// Function to create a node list
				// of the content between this <h2> and the next
				const getContent = elem => {
					let elems = [];
					while (
						elem.nextElementSibling &&
						elem.nextElementSibling.tagName !== 'H3'
					) {
						elems.push(elem.nextElementSibling);
						elem = elem.nextElementSibling;
					}

					// Delete the old versions of the content nodes
					elems.forEach(node => {
						node.parentNode.removeChild(node);
					});

					return elems;
				};

				// Assign the contents to be expanded/collapsed (array)
				let contents = getContent(heading);

				// Create a wrapper element for `contents` and hide it
				let wrapper = document.createElement('div');
				wrapper.hidden = true;

				// Add each element of `contents` to `wrapper`
				contents.forEach(node => {
					wrapper.appendChild(node);
				});

				// Add the wrapped content back into the DOM
				// after the heading
				heading.parentNode.insertBefore(wrapper, heading.nextElementSibling);

				// Assign the button
				let btn = heading.querySelector('button');

				btn.onclick = () => {
					// Cast the state as a boolean
					let expanded = btn.getAttribute('aria-expanded') === 'true' || false;

					// Switch the state
					btn.setAttribute('aria-expanded', !expanded);
					// Switch the content's visibility
					wrapper.hidden = expanded;
				};
			});
		})();

		jQuery($ => {
			jQueryBridget('isotope', Isotope, $);
			let $grid = $('.books');
			$grid.isotope({
				itemSelector: '.book',
				getSortData: {
					title: '.book__title a',
					subject: '[data-subject]',
					latest: '[data-date-published]',
				},
				sortAscending: {
					title: true,
					subject: false,
					latest: false,
				},
			});
			let licenses = document.querySelector('.license-filters');
			let subjects = document.querySelector('.subject-filters');
			let sorts = document.querySelector('.sorts');
			licenses.addEventListener('click', function(event) {
				if (event.target.type !== 'radio') {
					return;
				}
				let license = '';
				let subject = '';
				if (subjects.querySelector('input[type="radio"]:checked').value) {
					subject = `[data-subject="${
						subjects.querySelector('input[type="radio"]:checked').value
					}"]`;
				}
				license = `[data-license="${event.target.value}"]`;
				alert(`[data-license="${event.target.value}"]${subject}`);
				$grid.isotope({
					filter: `[data-license="${event.target.value}"]${subject}`,
				});
			});
			subjects.addEventListener('click', function(event) {
				if (event.target.type !== 'radio') {
					return;
				}
				let license = '';
				let subject = '';
				if (licenses.querySelector('input[type="radio"]:checked').value) {
					license = `[data-license="${
						licenses.querySelector('input[type="radio"]:checked').value
					}"]`;
				}
				subject = `[data-subject="${event.target.value}"]`;
				alert(`${license}[data-subject="${event.target.value}"]`);
				$grid.isotope({
					filter: `${license}${subject}`,
				});
			});
			sorts.addEventListener('click', function(event) {
				if (event.target.type !== 'radio') {
					return;
				}
				$grid.isotope({ sortBy: event.target.value });
			});
			// 	$('.filters > a').click(e => {
			// 		e.preventDefault();
			// 		$('.filters').toggleClass('is-active');
			// 		$('.filter-groups > div').removeClass('is-active');
			// 	});
			// 	$('.filter-groups .subjects > a').click(e => {
			// 		e.preventDefault();
			// 		let id = $(e.currentTarget).attr('href');
			// 		$(`.filter-groups .subjects:not(${id})`).removeClass('is-active');
			// 		$(`.filter-groups ${id}`).toggleClass('is-active');
			// 	});
			// 	$('.licenses > a').click(e => {
			// 		e.preventDefault();
			// 		let id = $(e.currentTarget).attr('href');
			// 		$(id).toggleClass('is-active');
			// 	});
			// 	$('.subjects .filter-list a').click(e => {
			// 		e.preventDefault();
			// 		if ($(e.currentTarget).hasClass('is-active')) {
			// 			$('.subjects .filter-list a').removeClass('is-active');
			// 			$('.subjects').removeClass('has-active-child');
			// 		} else {
			// 			$('.subjects .filter-list a').removeClass('is-active');
			// 			$(e.currentTarget).addClass('is-active');
			// 			$('.subjects').removeClass('has-active-child');
			// 			$(e.currentTarget)
			// 				.parent()
			// 				.parent()
			// 				.parent('.subjects')
			// 				.addClass('has-active-child');
			// 		}
			// 		let subjectValue = $('.subjects .filter-list a.is-active').attr(
			// 			'data-filter'
			// 		);
			// 		let licenseValue = $('.licenses .filter-list a.is-active').attr(
			// 			'data-filter'
			// 		);
			// 		if (typeof licenseValue === 'undefined') {
			// 			licenseValue = '';
			// 		} else {
			// 			licenseValue = `[data-license="${licenseValue}"]`;
			// 		}
			// 		if (typeof subjectValue === 'undefined') {
			// 			subjectValue = '';
			// 		} else {
			// 			subjectValue = `[data-subject="${subjectValue}"]`;
			// 		}
			// 		$grid.isotope({ filter: `${subjectValue}${licenseValue}` });
			// 	});
			// 	$('.licenses .filter-list a').click(e => {
			// 		e.preventDefault();
			// 		if ($(e.currentTarget).hasClass('is-active')) {
			// 			$('.licenses .filter-list a').removeClass('is-active');
			// 			$('.licenses').removeClass('has-active-child');
			// 		} else {
			// 			$('.licenses .filter-list a').removeClass('is-active');
			// 			$(e.currentTarget).addClass('is-active');
			// 			$('.licenses').addClass('has-active-child');
			// 		}
			// 		let subjectValue = $('.subjects .filter-list a.is-active').attr(
			// 			'data-filter'
			// 		);
			// 		let licenseValue = $('.licenses .filter-list a.is-active').attr(
			// 			'data-filter'
			// 		);
			// 		if (typeof licenseValue === 'undefined') {
			// 			licenseValue = '';
			// 		} else {
			// 			licenseValue = `[data-license="${licenseValue}"]`;
			// 		}
			// 		if (typeof subjectValue === 'undefined') {
			// 			subjectValue = '';
			// 		} else {
			// 			subjectValue = `[data-subject="${subjectValue}"]`;
			// 		}
			// 		$grid.isotope({ filter: `${subjectValue}${licenseValue}` });
			// 	});
			// 	$('.sort > a').click(e => {
			// 		e.preventDefault();
			// 		$('.sort').toggleClass('is-active');
			// 	});
			// 	$('.sorts a').click(e => {
			// 		e.preventDefault();
			// 		let sortBy = $(e.currentTarget).attr('data-sort');
			// 		$('.sorts a').removeClass('is-active');
			// 		$(e.currentTarget).addClass('is-active');
			// 		$grid.isotope({ sortBy: sortBy });
			// 	});
		});
	},
	finalize() {},
};