const clickEvents = () => {
	// data-class
	document.querySelectorAll('.js-toggle-class').forEach(function (item) {
		item.addEventListener('click', function (e) {
			const el = e.currentTarget;
			const toggle = this.dataset.class;

			if (el.classList.contains(toggle)) {
				el.classList.remove(toggle);
			} else {
				el.classList.add(toggle);
			}
		});
	});

	// data-class
	// data-remove-class
	// data-dom
	document
		.querySelectorAll('.js-toggle-element-class')
		.forEach(function (item) {
			item.addEventListener('click', function () {
				const toggle = this.dataset.class;
				const remove = this.dataset.removeClass;

				document
					.querySelectorAll(this.dataset.dom)
					.forEach(function (el) {
						try {
							// remove all class start width
							const prefix = remove.split('*')[0];
							const classes = el.className
								.split(' ')
								.filter((c) => !c.startsWith(prefix));
							el.className = classes.join(' ').trim();
						} catch (error) {
							el.classList.remove(remove);
						}

						if (el.classList.contains(toggle)) {
							el.classList.remove(toggle);
						} else {
							el.classList.add(toggle);
						}
					});
			});
		});
};

export { clickEvents };
