Filter Drawer

class ACLFilterDrawer {
	constructor(filterDrawerEl, filterData, closeOnLostFocus = true) {
		this.filterDrawerEl = filterDrawerEl;
		this.closeOnLostFocus = closeOnLostFocus;
		this.filterButton = this.filterDrawerEl.querySelector('.acl-filter-drawer__button');
		this.filterData = filterData;
		this.drawer = this.filterDrawerEl.querySelector('.acl-filter-drawer__drawer');
		this.selectableChipsEl = this.filterDrawerEl.querySelector('.acl-selectable-chips');
		this.selectedChipCountEl = this.filterButton.querySelector('.acl-filter-drawer__selected-count');
		this.closeButton = this.filterDrawerEl.querySelector('.acl-filter-drawer__drawer-close-button');
		this.selectableChips = new acl.ACLSelectableChips(this.selectableChipsEl, this.filterData);
		this.handleEventListeners();
		this.getSelectedChipCount();
	}

	handleEventListeners() {
		this.filterButton.addEventListener('click', () => {
			this.openDrawer();
		});

		this.closeButton.addEventListener('click', () => {
			this.closeDrawer();
		});

		this.selectableChipsEl.addEventListener(
			'selectedchipcount',
			e => {
				this.selectedChipCountEl.innerHTML = e.detail.toString();

				if (e.detail > 0) {
					this.showSelectedChipCount();
				} else {
					this.hideSelectedChipCount();
				}
			},
			false
		);

		if (this.closeOnLostFocus) {
			document.addEventListener('click', (event) => {
				this.handleDocumentClick(event);
			});
		}
	}

	handleDocumentClick(event) {
		if (!this.filterDrawerEl.contains(event.target)) {
			this.closeDrawer();
		}
	}

	openDrawer() {
		this.drawer.dataset.expanded = 'true';
	}

	closeDrawer() {
		this.drawer.dataset.expanded = 'false';
	}

	getSelectedChips() {
		this.selectableChips.getSelectedChips();
	}

	getSelectedChipCount() {
		this.selectedChipCount = this.selectableChips.getSelectedChips();
	}

	hideSelectedChipCount() {
		this.selectedChipCountEl.classList.add('acl-filter-drawer__selected-count--hidden');
	}

	showSelectedChipCount() {
		this.selectedChipCountEl.classList.remove('acl-filter-drawer__selected-count--hidden');
	}

	dispatchCustomEvent(element, eventName, detailObj) {
		element.dispatchEvent(
			new CustomEvent(eventName, {
				detail: detailObj,
			})
		);
	}
}

export { ACLFilterDrawer };