export class Application {
	constructor() {
		this.addTopHandlers()
	}

	addTopHandlers() {
		for (const top of document.querySelectorAll('.top'))
			top.addEventListener('click', event => this.handlerTop(event))
	}

	handlerTop(event) {
		const topEl = event.target.closest('.top')
		console.log(topEl.dataset.self)

		let records, types, values
		if (topEl.classList.contains('open')) {
			records = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"]`)
			types = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"] + .type`)
			values = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"] + .type + .value`)

			for (const r of records) {
				r.classList.remove('show')
				r.classList.remove('open')
			}

			for (const r of types)
				r.classList.remove('show')
			for (const r of values)
				r.classList.remove('show')

			topEl.classList.remove('open')
		} else {
			records = document.querySelectorAll(`[data-top="${topEl.dataset.self}"]`)
			types = document.querySelectorAll(`[data-top="${topEl.dataset.self}"] + .type`)
			values = document.querySelectorAll(`[data-top="${topEl.dataset.self}"] + .type + .value`)

			for (const r of records)
				r.classList.add('show')
			for (const r of types)
				r.classList.add('show')
			for (const r of values)
				r.classList.add('show')

			topEl.classList.add('open')
		}


	}
}