Single Select Dropdown: Categories

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

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

		this.selectors = {
			...this.selectors,
			selectResultItem: 'acl-select-dropdown__item',
			selectAssociatedColour: 'acl-select-dropdown__cta-link--associated-colour',
			noResultsPlaceholder: 'acl-dropdown__no-results-placeholder',
			placeholder: 'acl-select-dropdown__placeholder',
			configurableContent: 'acl-select-dropdown__configurable-content',
		};

		this.eventName = Object.freeze({
			...this.eventName,
			DROPDOWN_ITEM_CLICKED: 'dropdownitemclicked',
		});

		this.resultItems = this.dropdownEl.querySelector(`.${this.selectors.resultItems}`);
		this.configurableContent = this.dropdownEl.querySelector(`.${this.selectors.configurableContent}`);

		if (this.dropdownType !== this.types.buttonSingleSelect) this.setPlaceholder();

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

		if (this.configurableContent)
			this.configurableContent.addEventListener(this.eventName.CLICK, () => {
				this.shouldCloseDropdown = false;
			});
	}

	createResultItem(result) {
		let resultItemEl = document.createElement('div');
		let resultIconMarkup = '';

		if (result.associatedColour) resultItemEl.style.borderLeft = `3px solid ${result.associatedColour}`;

		if (result.associatedIcon)
			resultIconMarkup = `<i class="aforza-icons acl-select-dropdown__associated-icon" style="color:${result.associatedIconColour}">${result.associatedIcon}</i>`;

		resultItemEl.innerHTML = `${resultIconMarkup}${result.value}`;
		resultItemEl.classList.add(this.selectors.resultItem);
		this.isDropdownSelect ? resultItemEl.classList.add(this.selectors.selectResultItem) : '';
		resultItemEl.dataset.resultId = result.id;
		resultItemEl.dataset.resultValue = result.value;
		resultItemEl.title = result.value;

		if (result.selected || result.id === this.dropdownEl.dataset.activeSelection) {
			super.setItemAsSelected(resultItemEl);
			this.ctaEl.dataset.active = true;
		}

		resultItemEl.addEventListener(this.eventName.CLICK, this.resultItemClick.bind(this));
		this.resultItems.appendChild(resultItemEl);
	}

	populateResults() {
		if (this.results && this.results.length > 0) {
			this.results.forEach(result => this.createResultItem(result));
		} else {
			super.createEmptyResultsList();
		}
	}

	resultItemClick(event) {
		const result = event.currentTarget;

		if (result) {
			if (this.dropdownType !== this.types.buttonSingleSelect) super.setItemAsSelected(result);
			this.ctaEl.dataset.active = true;

			dispatchCustomEvent(this.dropdownEl, this.eventName.DROPDOWN_ITEM_CLICKED, {
				id: result.dataset.resultId,
				resultName: result.dataset.resultValue,
			});
		}
	}
}

export { ACLDropdownSingleSelect };