import {makeArray, Expander} from '../../../themes/springernature/js/helpers';

class EdsCHeaderNew {

	constructor(selector = 'data-eds-c-header-new') {
		this.selector = `[${selector}]`;
		this.dataComponent = '[data-eds-c-header-new-expander]';
		this.expanderAnchor = '[data-eds-c-header-new-expander-anchor]';
		this.countElementCart = '[data-eds-c-header-new-cart-count]';
		this.countElementNotifications = '[data-eds-c-header-new-notifications-count]';
		this.dropDownCountElementNotifications = '[data-eds-c-header-new-dropdown-notifications-count]';
		this.ariaLiveAnnouncementsList = '[data-eds-c-header-new-aria-live-announcements]';
		this.ariaLabelCart = '[data-eds-c-header-new-cart-aria-label]';
		this.ariaLabelNotifications = '[data-eds-c-header-new-notification-aria-label]';
		this.tethered = 'has-tethered';
	}

	_findTarget(selector){
		if (selector) {
			return document.querySelector(selector);
		}
		return null;
	}

	_uiHandler(countElement) {
		const spanElement = document.querySelector(countElement);
		if (spanElement) {
			if (spanElement.classList.contains('u-display-none')) {
				spanElement.classList.remove('u-display-none');
			}
		}
	}

	_createAndAppendNewAriaLiveItem (message) {
		const el = document.querySelector(this.ariaLiveAnnouncementsList);
		const newItem = document.createElement('p');
		newItem.innerHTML = message;
		el.appendChild(newItem);
	}

	_actionItemsCountHandler(type, count, message) {
		const countSelector = this[`countElement${type}`];
		const labelSelectorElement = document.querySelector(this[`ariaLabel${type}`]);

		if (count >= 0) {
			this._uiHandler(countSelector);
		}
		document.querySelector(countSelector).innerHTML = count;
		if (labelSelectorElement) {
			labelSelectorElement.innerHTML = message;
		}
		this._createAndAppendNewAriaLiveItem(message);
	}

	_dropdownNotificationCountHandler(count) {
		const counter = document.querySelector(this.dropDownCountElementNotifications);
		if (counter) {
			counter.innerHTML = count;
		}
	}

	cartHandler(count, ariaLiveMessage) {
		this._actionItemsCountHandler('Cart', count, ariaLiveMessage);
	}

	notificationHandler(count, ariaLiveMessage) {
		this._actionItemsCountHandler('Notifications', count, ariaLiveMessage);
		this._dropdownNotificationCountHandler(count);
	}

	cleanAriaLiveAnnouncements() {
		document.querySelector(this.ariaLiveAnnouncementsList).innerHTML = '';
	}

	init() {
		const headerElement = document.querySelector(this.selector);

		if (!headerElement) {
			return;
		}

		const triggerElements = document.querySelectorAll(this.dataComponent);

		if (triggerElements.length === 0 || !headerElement) {
			return;
		}

		makeArray(triggerElements).forEach(trigger => {
			const targetElement = this._findTarget(trigger.getAttribute('data-eds-c-header-new-js'));

			if (!targetElement) {
				return;
			}
			const triggerAttributes = [{name: 'role', value: 'button'}];
			triggerAttributes.forEach(function (attribute) {
				trigger.setAttribute(attribute.name, attribute.value);
			});
			if (targetElement.hasAttribute('data-eds-c-header-new-expander-append')) {
				headerElement.querySelector(this.expanderAnchor).append(targetElement);
			} else {
				headerElement.after(targetElement);
			}
			targetElement.classList.add(this.tethered);
			const expander = new Expander(trigger, targetElement, {AUTOFOCUS: 'firstTabbable'});
			expander.init();

			return expander;
		});
	}
}

export default EdsCHeaderNew;

