Multi Select Dropdown

import { ACLDropdown } from '../index.js';
import { dispatchCustomEvent, modifier } from '../../../utilities';

class ACLDropdownMultiSelect extends ACLDropdown {
	constructor(
		dropdownEl,
		results,
		options = {
			showClearOnSelect: false,
			scrollEventPercentageOffset: 80,
			scrollEventDebounceValue: 2000,
			initiallyPopulateResults: false,
			readonly: false,
			dropUp: false,
			dropUpOffset: 12,
			lazyLoading: true,
		}
	) {
		super(dropdownEl, results, options);

		this.eventName = Object.freeze({
			...this.eventName,
			CLEAR_DROPDOWN: 'cleardropdown',
			CLICK: 'click',
			SELECTED_ITEMS: 'selecteditems',
		});

		this.selectors = {
			...this.selectors,
			resultMultiItem: 'acl-select-dropdown__multi-item',
			selectDropdownGroupHeader: 'acl-select-dropdown__group-header',
			selectDropdownGroupItems: 'acl-select-dropdown__grouped-items',
			selectDropdownSelectedResults: 'acl-select-dropdown__selected-results',
			selectDropdownPreview: 'acl-select-dropdown__selected-preview',
			selectedOverflowCount: 'acl-select-dropdown__selected-overflow-count',
			selectedPreviewItem: 'acl-select-dropdown__selected-preview-item',
			selectSelectedIndicator: 'acl-select-dropdown__selected-indicator',
		};

		this.groupedResultItems = this.dropdownEl.querySelector(`.${this.selectors.selectDropdownGroupItems}`);
		this.selectedResultItems = this.dropdownEl.querySelector(`.${this.selectors.selectDropdownSelectedResults}`);
		this.multiSelectArray = [];

		if (this.resultItems) this.populateResults();
		if (this.resultItems && this.options.initiallyPopulateResults) this.populateResults();

		this.setPlaceholder();
		this.updateSelectedPreview();

		this.setScrollPositionCustomEvents(
			this.options.scrollEventPercentageOffset,
			this.options.scrollEventDebounceValue
		);
	}

	createMultiSelectResultItem(result) {
		const template = `<div class="acl-select-dropdown__select">
                            <div class="${this.selectors.selectSelectedIndicator}"></div>
                          <div class="acl-select-dropdown__select-label">${result.value}</div></div>`;

		const resultItemEl = document.createElement('div');
		resultItemEl.innerHTML = template;
		resultItemEl.classList.add(this.selectors.resultItem, this.selectors.resultMultiItem);
		resultItemEl.dataset.resultId = result.id;
		resultItemEl.dataset.resultValue = result.value;

		if (result.selected) {
			this.addToMultiSelectedArray(result);
			const selectedResultItem = resultItemEl.cloneNode(true);
			selectedResultItem.dataset.resultId = result.id;
			selectedResultItem.dataset.resultValue = result.value;

			selectedResultItem.addEventListener(this.eventName.CLICK, this.multipleResultItemClick.bind(this));
			this.appendSelectedCheckboxItem(selectedResultItem);
			resultItemEl.classList.add(`${this.selectors.resultItem}${modifier.HIDDEN}`);
			this.showClearButton(true);
		}

		resultItemEl.addEventListener(this.eventName.CLICK, this.multipleResultItemClick.bind(this));
		this.groupedResultItems.appendChild(resultItemEl);
	}

	generatePreviewItemMarkup() {
		const previewArray = this.multiSelectArray.slice(0, 1);
		let percentageWidth = this.getPreviewItemPercentageMaxWidth(previewArray);
		previewItemContainer.innerHTML = '';

		previewArray.forEach(item => {
			this.createPreviewItem(item, percentageWidth);
		});

		this.createPreviewOverflowCount(previewArray.length);
	}

	updateMultiSelectResults() {
		this.selectedResultItems.innerHTML = '';
		this.multiSelectArray = [];
		this.populateResults();
	}

	populateResults() {
		if (this.results) {
			this.clearGroupedItems();
			this.results.forEach(result => this.createMultiSelectResultItem(result));
		}
	}

	updateResults(results) {
		this.results = results;
		this.clearGroupedItems();
		this.updateMultiSelectResults();
		this.updateSelectedPreview();
	}

	updateSelectedPreview() {
		const selectedHeader = this.dropdownEl.querySelector(`.${this.selectors.selectDropdownGroupHeader}`);
		const previewContainer = this.dropdownEl.querySelector(`.${this.selectors.ctaLinkLabel}`);
		const containerWidth = previewContainer.clientWidth;

		if (this.multiSelectArray.length > 0) {
			let previewItemContainer = this.ctaLinkLabel.querySelector(`.${this.selectors.selectDropdownPreview}`);

			if (!previewItemContainer) {
				const previewContainer = document.createElement('div');
				previewContainer.classList.add(`${this.selectors.selectDropdownPreview}`);
				this.ctaLinkLabel.appendChild(previewContainer);
				previewItemContainer = previewContainer;
			}

			if (containerWidth <= 250) {
				const previewArray = this.multiSelectArray.slice(0, 1);
				let percentageWidth = this.getPreviewItemPercentageMaxWidth(previewArray);
				previewItemContainer.innerHTML = '';

				previewArray.forEach(item => {
					this.createPreviewItem(item, percentageWidth);
				});

				this.createPreviewOverflowCount(previewArray.length);
			}

			if (containerWidth > 250) {
				const previewArray = this.multiSelectArray.slice(0, 3);
				let percentageWidth = this.getPreviewItemPercentageMaxWidth(previewArray);
				previewItemContainer.innerHTML = '';

				previewArray.forEach(item => {
					this.createPreviewItem(item, percentageWidth);
				});

				this.createPreviewOverflowCount(previewArray.length);
			}

			selectedHeader.classList.remove(`${this.selectors.selectDropdownGroupHeader}${modifier.HIDDEN}`);
		} else {
			selectedHeader.classList.add(`${this.selectors.selectDropdownGroupHeader}${modifier.HIDDEN}`);
			this.setPlaceholder();
		}
	}

	createPreviewItem(result, maxWidth) {
		let previewItemContainer = this.ctaLinkLabel.querySelector(`.${this.selectors.selectDropdownPreview}`);

		if (!previewItemContainer) {
			const previewContainer = document.createElement('div');
			previewContainer.classList.add(`${this.selectors.selectDropdownPreview}`);
			this.ctaLinkLabel.appendChild(previewContainer);
			previewItemContainer = previewContainer;
		}

		const previewItem = document.createElement('div');

		const template = `<div class="acl-select-dropdown__selected-preview-label">${result.value}</div> <i class="aforza-icons">acl_close_small</i>`;

		previewItem.classList.add(this.selectors.selectedPreviewItem);
		previewItem.style.maxWidth = maxWidth;
		previewItem.dataset.resultId = result.id;
		previewItem.innerHTML = template;

		this.removePlaceholder();

		previewItem.addEventListener(this.eventName.CLICK, event => {
			event.stopPropagation();
			this.shouldCloseDropdown = false;
			const result = event.currentTarget;
			this.multipleResultItemClick(event);

			const resultItems = Array.from(this.resultItems.querySelectorAll(`.${this.selectors.resultItem}`));
			const matchedResultItem = resultItems.find(
				resultItem => resultItem.dataset.resultId === result.dataset.resultId
			);
			if (matchedResultItem) matchedResultItem.remove();
		});

		previewItemContainer.appendChild(previewItem);
	}

	clearSelection(dispatchClearEvent) {
		this.showClearButton(false);

		this.setPlaceholder();
		this.ctaLinkLabel.style.borderLeft = '';

		if (this.ctaLinkLabel.classList.contains(this.selectors.selectAssociatedColour))
			this.ctaLinkLabel.classList.remove(this.selectors.selectAssociatedColour);

		if (dispatchClearEvent)
			dispatchCustomEvent(this.dropdownEl, this.eventName.CLEAR_DROPDOWN, {
				items: this.multiSelectArray,
			});

		this.multiSelectArray = [];

		this.setAllResultsToUnselected();
		this.updateMultiSelectResults();
		this.updateSelectedPreview();
	}

	createPreviewOverflowCount(amountVisible) {
		let previewItemContainer = this.ctaLinkLabel.querySelector(`.${this.selectors.selectDropdownPreview}`);
		const previewCount = this.multiSelectArray.length - amountVisible;
		const overflowCountTemplate = `<div class="acl-select-dropdown__selected-preview-ellipsis ">...</div>
                                       <div class="acl-select-dropdown__selected-preview-count">
									   ${this.multiSelectArray.length - amountVisible}</div>`;
		const overflowCountElement = document.createElement('div');
		overflowCountElement.classList.add(this.selectors.selectedOverflowCount);
		overflowCountElement.innerHTML = overflowCountTemplate;

		if (previewCount > 0) previewItemContainer.appendChild(overflowCountElement);
	}

	addToMultiSelectedArray(result) {
		if (result.hasOwnProperty('id')) {
			this.multiSelectArray.push(result);
		} else {
			const selectedItem = this.createNewResultObject(result, true);
			this.multiSelectArray.push(selectedItem);
		}
	}

	getPreviewItemPercentageMaxWidth(array) {
		let percentageWidth;

		if (array.length == 1) {
			percentageWidth = '65%';
		} else if (array.length == 2) {
			percentageWidth = '45%';
		} else {
			percentageWidth = '25%';
		}
		return percentageWidth;
	}

	setAllResultsToUnselected() {
		this.results.forEach(result => (result.selected = false));
	}

	multipleResultItemClick(event) {
		this.shouldCloseDropdown = false;
		const result = event.currentTarget;

		const isResultCurrentlySelected = this.multiSelectArray.findIndex(obj => obj.id === result.dataset.resultId);

		if (isResultCurrentlySelected > -1) {
			this.removeFromMultiSelectedArray(result);
			result.remove();
		} else {
			const selectedResult = result.cloneNode(true);
			selectedResult.dataset.resultId = result.dataset.resultId;
			selectedResult.dataset.resultValue = result.dataset.resultValue;
			selectedResult.addEventListener(this.eventName.CLICK, this.multipleResultItemClick.bind(this));
			this.addToMultiSelectedArray(selectedResult);
			this.appendSelectedCheckboxItem(selectedResult);
			result.classList.add(`${this.selectors.resultItem}${modifier.HIDDEN}`);
		}

		this.updateSelectedPreview();

		dispatchCustomEvent(this.dropdownEl, this.eventName.SELECTED_ITEMS, {
			items: this.multiSelectArray,
		});

		this.showClearButton(this.multiSelectArray.length > 0);
	}

	appendSelectedCheckboxItem(result) {
		const resultIndicator = result.querySelector(`.${this.selectors.selectSelectedIndicator}`);
		resultIndicator.classList.add(`${this.selectors.selectSelectedIndicator}${modifier.ACTIVE}`);
		this.selectedResultItems.appendChild(result);
	}

	deselectItem(result) {
		const resultItemIndex = this.results.findIndex(element => element.id == result.dataset.resultId);
		this.results[resultItemIndex].selected = false;

		const resultItems = Array.from(
			this.resultItems.querySelectorAll(`.${this.selectors.resultItem}${modifier.HIDDEN}`)
		);
		const matchedResultItem = resultItems.find(
			resultItem => resultItem.dataset.resultId === result.dataset.resultId
		);

		if (matchedResultItem) matchedResultItem.classList.remove(`${this.selectors.resultItem}${modifier.HIDDEN}`);
	}

	removeFromMultiSelectedArray(result) {
		const selectedItem = this.createNewResultObject(result, true);
		const resultItemIndex = this.multiSelectArray.findIndex(element => element.id == result.dataset.resultId);
		this.multiSelectArray.splice(resultItemIndex, 1);
		this.deselectItem(result);
	}

	clearGroupedItems() {
		if (this.groupedResultItems) this.groupedResultItems.innerHTML = '';
	}
}

export { ACLDropdownMultiSelect };