/**
 * Functions for the Teacher Resources Page.
 */

const pageTeacherResources = {
	perPage: 12,
	teacherResourcesInputs: null,
	inputCollections: null,
	s: null,
	rt: null,
	filterByNames: {
		trt: 'teacher-resource-tax',
		all: 'all-id'
	},
	init: () => {
		if (pageTeacherResources.shouldCallFunctions('/teacher-resources')) {
			window.addEventListener('DOMContentLoaded', async function () {
				await pageTeacherResources.loadVariables();
				await pageTeacherResources.addEventListenerToFilterInputs();
				await pageTeacherResources.loadTeacherResources(1);
			});
		}
	},
	shouldCallFunctions: (param) => {
		return (window.location.href.indexOf(param) >= 0 ? true : false);
	},
	loadVariables: async () => {
		pageTeacherResources.teacherResourcesInputs = document.querySelectorAll('.teacher-resources-search-filter');
		pageTeacherResources.inputCollections = {
			'teacher-resources': pageTeacherResources.teacherResourcesInputs
		};
	},
	addEventListenerToFilterInputs: async () => {
		const inputTypes = ['checkbox'];

		Object.entries(pageTeacherResources.inputCollections).forEach(entry => {
			const [type, inputCollection] = entry;

			if (!pageTeacherResources.checkIfElementExistsOnDOM(inputCollection)) {
				return;
			}

			inputCollection.forEach((inputItem) => {
				const eventType = inputTypes.includes(inputItem.type) ? 'change' : 'blur';

				inputItem.addEventListener(eventType, async (e) => {
					await pageTeacherResources.setCheckedInputSiblings(inputItem);
					await pageTeacherResources.uncheckInputAll(inputItem);
				});
			});
		});
	},
	setCheckedInputSiblings: async (inputChecked) => {
		if (inputChecked.name.indexOf('all') == -1) {
			return false;
		}

		const parentDiv = findParent(inputChecked, '.at-filters-component-filter-list-container');

		parentDiv.childNodes.forEach((childDiv) => {
			if (childDiv.tagName === 'DIV') {
				if (childDiv.firstChild.name !== inputChecked.name) {
					childDiv.firstChild.checked = inputChecked.checked;
				}
			}
		});
	},
	uncheckInputAll: async (inputChecked) => {
		if (
			inputChecked.name.indexOf('all') >= 0 ||
			inputChecked.checked
		) {
			return false;
		}

		const parentDiv = findParent(inputChecked, '.at-filters-component-filter-list-container');

		if (parentDiv !== null) {
			parentDiv.firstChild.firstChild.checked = false;
		}
	},
	checkIfElementExistsOnDOM: (element) => {
		if (element === null) {
			return false;
		}

		return element.length;
	},
	redirectURLWithFilterValues: (bodyData, type) => {
		const taxFields = bodyData?.taxFields ? Object.entries(bodyData?.taxFields) : [];
		let newParams = pageTeacherResources.mountBaseQueryString(type);

		taxFields.forEach(([field, value]) => {
			newParams += pageTeacherResources.mountParamsToURL(field, value);
		});

		window.location.href = `${window.location.origin}/${newParams}`;
	},
	submitForm: async () => {
		const checkedFields = document.querySelectorAll('.teacher-resources-search-filter:checked');

		bodyData = pageTeacherResources.mountBodyData(checkedFields, 'teacher-resource');
		pageTeacherResources.redirectURLWithFilterValues(bodyData, 'teacher-resources');
	},
	mountBodyData: (elements, type) => {
		const searchReturn = {s: ''};
		pageTeacherResources.s = searchReturn.s;

		searchReturn['queryType'] = type;

		if (elements) {
			searchReturn['taxFields'] = {};

			elements.forEach((field) => {
				if (!field.value) {
					return;
				}

				let fieldValue = field.value;

				if (field.name.includes('teacher-resource-tax-')) {
					fieldValue = field.name.replace('teacher-resource-tax-', '');
				}

				if (field.name.includes('tax') || field.name.includes('all-')) {
					searchReturn['taxFields'][field.name] = fieldValue;
				}
			});
		}

		return searchReturn;
	},
	mountBaseQueryString: (type) => {
		return `?s=${pageTeacherResources.s}&rt=${type}`;
	},
	mountParamsToURL: (field, value) => {
		let params = '';
		const filterByNames = Object.entries(pageTeacherResources.filterByNames);

		if (!isNaN(field)) {
			params = `&${field}=${value}`;
		}

		filterByNames.forEach(([param, name]) => {

			if (field.indexOf(name) == -1) {
				return;
			}

			const arrayName = field.split('-');
			if (arrayName.length >= 3) {
				let lastIndex = arrayName.length - 1;
				params = `&${param}-${arrayName[lastIndex]}=${value}`;
				return;
			}

			if (isNaN(value)) {
				params = `&${param}=${value}`;
			}
		})

		return params;
	},
	loadTeacherResources: async (page) => {
		const container = document.querySelector('#load-teacher-resources');

		addLoading(document.querySelector('#page'), true);

		if (container.getAttribute('data-loaded-page')) {
			page = container.getAttribute('data-loaded-page');

			container.removeAttribute('data-loaded-page');
		}

		const teacherResourcesContent = await fetchTeacherResourcesContent(page, pageTeacherResources.perPage);

		removeLoadingBlock();
		updateInnerHTML(container, teacherResourcesContent);
	},
	paginate: async (e, element) => {
		e.preventDefault();

		const contentElement = document.querySelector('#load-teacher-resources');
		const page = element.getAttribute('data-page') ?? 1;
		const titleElement = findParent(e.target, '#main')
			.querySelector('.at-section-title');

		if (!contentElement.getAttribute('data-page')) {
			contentElement.setAttribute('data-page', 1);
		}

		await scrollToElement(titleElement);
		await pageTeacherResources.loadTeacherResources(page);

		if (page > 1) {
			injectURL('teacher-resources', '/teacher-resources/page/' + page);
		} else {
			injectURL('teacher-resources', '/teacher-resources/');
		}
	}
}

pageTeacherResources.init();