import {
	Chart,
	LineController,
	CategoryScale,
	LinearScale,
	LineElement,
	PointElement,
	Tooltip,
	Filler,
} from 'chart.js';

import * as categoryFilter from '../../modules/categoryFilter';
import * as userFilter from '../../modules/userFilter';
import * as autocomplete from '../../modules/autocomplete';
import * as api from '../../modules/api';
import * as alerts from '../../modules/alerts';
import * as components from '../../modules/components';

Chart.register(LineController, CategoryScale, LinearScale, LineElement, PointElement, Tooltip, Filler);

const selected = new Map([
	['cids', []],
	['assignee', []],
	['targetUid', []],
	['reporterId', []],
]);

export function init() {
	enableFilterForm();
	enableCheckboxes();
	handleBulkActions();

	if (ajaxify.data.filters.hasOwnProperty('cid')) {
		selected.set('cids', Array.isArray(ajaxify.data.filters.cid) ?
			ajaxify.data.filters.cid : [ajaxify.data.filters.cid]);
	}

	categoryFilter.init($('[component="category/dropdown"]'), {
		privilege: 'moderate',
		selectedCids: selected.get('cids'),
		updateButton: function ({ selectedCids: cids }) {
			selected.set('cids', cids);
			applyFilters();
		},
	});

	['assignee', 'targetUid', 'reporterId'].forEach((filter) => {
		if (ajaxify.data.filters.hasOwnProperty('filter')) {
			selected.set(filter, ajaxify.data.selected[filter]);
		}
		const filterEl = $(`[component="flags/filter/${filter}"]`);
		userFilter.init(filterEl, {
			selectedUsers: selected.get(filter),
			template: 'partials/flags/filters',
			selectedBlock: `selected.${filter}`,
			onSelect: function (_selectedUsers) {
				selected.set(filter, _selectedUsers);
			},
			onHidden: function () {
				applyFilters();
			},
		});
	});

	components.get('flags/list')
		.on('click', '[data-flag-id]', function (e) {
			if (['BUTTON', 'A'].includes(e.target.nodeName)) {
				return;
			}

			const flagId = this.getAttribute('data-flag-id');
			ajaxify.go('flags/' + flagId);
		});

	$('#flags-daily-wrapper').one('shown.bs.collapse', function () {
		handleGraphs();
	});

	autocomplete.user($('#filter-assignee, #filter-targetUid, #filter-reporterId'), (ev, ui) => {
		setTimeout(() => { ev.target.value = ui.item.user.uid; });
	});
}

export function enableFilterForm() {
	const $filtersEl = components.get('flags/filters');
	if ($filtersEl && $filtersEl.get(0).nodeName !== 'FORM') {
		// Harmony; update hidden form and submit on change
		const filtersEl = $filtersEl.get(0);
		const formEl = filtersEl.querySelector('form');

		filtersEl.addEventListener('click', (e) => {
			const subselector = e.target.closest('[data-value]');
			if (!subselector) {
				return;
			}

			const name = subselector.getAttribute('data-name');
			const value = subselector.getAttribute('data-value');

			formEl[name].value = value;

			applyFilters();
		});
	} else {
		// Persona; parse ajaxify data to set form values to reflect current filters
		for (const filter in ajaxify.data.filters) {
			if (ajaxify.data.filters.hasOwnProperty(filter)) {
				$filtersEl.find('[name="' + filter + '"]').val(ajaxify.data.filters[filter]);
			}
		}
		$filtersEl.find('[name="sort"]').val(ajaxify.data.sort);

		document.getElementById('apply-filters').addEventListener('click', function () {
			applyFilters();
		});

		$filtersEl.find('button[data-target="#more-filters"]').click((ev) => {
			const textVariant = ev.target.getAttribute('data-text-variant');
			if (!textVariant) {
				return;
			}
			ev.target.setAttribute('data-text-variant', ev.target.textContent);
			ev.target.firstChild.textContent = textVariant;
		});
	}
}

function applyFilters() {
	let formEl = components.get('flags/filters').get(0);
	if (!formEl) {
		return;
	}
	if (formEl.nodeName !== 'FORM') {
		formEl = formEl.querySelector('form');
	}

	const payload = new FormData(formEl);

	// cid is special comes from categoryFilter module
	selected.get('cids').forEach(function (cid) {
		payload.append('cid', cid);
	});

	// these three fields are special; comes from userFilter module
	['assignee', 'targetUid', 'reporterId'].forEach((filter) => {
		selected.get(filter).forEach(({ uid }) => {
			payload.append(filter, uid);
		});
	});

	const length = Array.from(payload.values()).filter(Boolean);
	const qs = new URLSearchParams(payload).toString();

	ajaxify.go('flags?' + (length ? qs : 'reset=1'));
}

export function enableCheckboxes() {
	const flagsList = document.querySelector('[component="flags/list"]');
	const checkboxes = flagsList.querySelectorAll('[data-flag-id] input[type="checkbox"]');
	const bulkEl = document.querySelector('[component="flags/bulk-actions"] button');
	let lastClicked;

	document.querySelector('[data-action="toggle-all"]').addEventListener('click', function () {
		const state = this.checked;

		checkboxes.forEach(function (el) {
			el.checked = state;
		});
		bulkEl.disabled = !state;
	});

	flagsList.addEventListener('click', function (e) {
		const subselector = e.target.closest('input[type="checkbox"]');
		if (subselector) {
			// Stop checkbox clicks from going into the flag details
			e.stopImmediatePropagation();

			if (lastClicked && e.shiftKey && lastClicked !== subselector) {
				// Select all the checkboxes in between
				const state = subselector.checked;
				let started = false;

				checkboxes.forEach(function (el) {
					if ([subselector, lastClicked].some(function (ref) {
						return ref === el;
					})) {
						started = !started;
					}

					if (started) {
						el.checked = state;
					}
				});
			}

			// (De)activate bulk actions button based on checkboxes' state
			bulkEl.disabled = !Array.prototype.some.call(checkboxes, function (el) {
				return el.checked;
			});

			lastClicked = subselector;
		}

		// If you miss the checkbox, don't descend into the flag details, either
		if (e.target.querySelector('input[type="checkbox"]')) {
			e.stopImmediatePropagation();
		}
	});
}

export function handleBulkActions() {
	document.querySelector('[component="flags/bulk-actions"]').addEventListener('click', function (e) {
		const subselector = e.target.closest('[data-action]');
		if (subselector) {
			const action = subselector.getAttribute('data-action');
			const flagIds = getSelected();
			const promises = flagIds.map((flagId) => {
				const data = {};
				if (action === 'bulk-assign') {
					data.assignee = app.user.uid;
				} else if (action === 'bulk-mark-resolved') {
					data.state = 'resolved';
				}
				return api.put(`/flags/${flagId}`, data);
			});

			Promise.allSettled(promises).then(function (results) {
				const fulfilled = results.filter(function (res) {
					return res.status === 'fulfilled';
				}).length;
				const errors = results.filter(function (res) {
					return res.status === 'rejected';
				});
				if (fulfilled) {
					alerts.success('[[flags:bulk-success, ' + fulfilled + ']]');
					ajaxify.refresh();
				}

				errors.forEach(function (res) {
					alerts.error(res.reason);
				});
			});
		}
	});
}

export function getSelected() {
	const checkboxes = document.querySelectorAll('[component="flags/list"] [data-flag-id] input[type="checkbox"]');
	const payload = [];
	checkboxes.forEach(function (el) {
		if (el.checked) {
			payload.push(el.closest('[data-flag-id]').getAttribute('data-flag-id'));
		}
	});

	return payload;
}

export function handleGraphs() {
	const dailyCanvas = document.getElementById('flags:daily');
	const dailyLabels = utils.getDaysArray().map(function (text, idx) {
		return idx % 3 ? '' : text;
	});

	if (utils.isMobile()) {
		Chart.defaults.plugins.tooltip.enabled = false;
	}
	const data = {
		'flags:daily': {
			labels: dailyLabels,
			datasets: [
				{
					label: '',
					backgroundColor: 'rgba(151,187,205,0.2)',
					borderColor: 'rgba(151,187,205,1)',
					pointBackgroundColor: 'rgba(151,187,205,1)',
					pointHoverBackgroundColor: '#fff',
					pointBorderColor: '#fff',
					pointHoverBorderColor: 'rgba(151,187,205,1)',
					data: ajaxify.data.analytics,
				},
			],
		},
	};

	dailyCanvas.width = $(dailyCanvas).parent().width();
	new Chart(dailyCanvas.getContext('2d'), {
		type: 'line',
		data: data['flags:daily'],
		options: {
			responsive: true,
			animation: false,
			scales: {
				y: {
					beginAtZero: true,
				},
			},
		},
	});
}

