class Popup {
	constructor(config = {}) {
		this.config = {
			toggle: document.querySelector('[data-toggles]'),
			popup: document.querySelector('.jvb-pop'),
			name: 'Popup',
			onOpen: () =>{},
			onClose: () =>{},
			onEscape: () =>{},
			... config
		};

		this.a11y = window.jvbA11y;
		this.toggleID = this.config.toggle.id === '' ? '.'+this.config.toggle.className.split(' ').join('.') : this.config.toggle.id;

		this.initListeners();
	}

	initListeners()
	{
		this.clickHandler = this.handleClick.bind(this);
		this.keyHandler = this.handleEscape.bind(this);

		document.addEventListener('click', this.handleToggle.bind(this));
	}

	handleToggle(e) {
		if (e.target === this.config.toggle || e.target.closest(this.toggleID)){
			this.togglePopup();
		}
	}
	handleClick(e) {
		if (!this.config.popup.contains(e.target)
			&& e.target !== this.config.toggle) {
			this.closePopup();
		} else if (window.targetCheck(e, '.close')) {
			this.closePopup();
		}
	}

	togglePopup() {
		if (!this.config.popup.classList.contains('expanded')) {
			this.openPopup();
		} else {
			this.closePopup();
		}
	}
	openPopup(message = `Opened ${this.config.name}`) {
		this.config.popup.classList.add('expanded');
		this.config.toggle.classList.add('expanded');
		this.config.toggle.title = `Hide ${this.config.name}`;
		this.config.toggle.ariaExpanded = true;
		this.config.toggle.querySelector('span').textContent = `Close ${this.config.name}`;
		this.a11y.announce(message);
		this.config.onOpen();
		document.addEventListener('keydown', this.keyHandler);
		document.addEventListener('click', this.clickHandler);
	}
	closePopup(message = `Closed ${this.config.name}`) {
		this.config.popup.classList.remove('expanded');
		this.config.toggle.classList.remove('expanded');
		this.config.toggle.title = `Show ${this.config.name}`;
		this.config.toggle.ariaExpanded = false;

		this.config.toggle.querySelector('span').textContent = '';
		this.a11y.announce(message);
		this.config.onClose();
		document.removeEventListener('keydown', this.keyHandler);
		document.removeEventListener('click', this.clickHandler);
	}
	handleEscape(e) {
		if (e.key === 'Escape') {
			this.closePopup(`Closed ${this.config.name} with escape key`);
			this.config.onEscape();
		}
	}
}

window.jvbPopup = Popup;