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

	moveRecords() {
		const records = Array.from(document.querySelectorAll('.record'))

		records.sort((a, b) => {
			if (a.innerText < b.innerText) return 1
			if (a.innerText > b.innerText) return -1
			return 0
		})

		for (const r of records) {
			const subTops = document.querySelectorAll(`.top[data-top="${r.dataset.top}"] + .type`)
			if (subTops === null) {
				continue
			}

			let lastSubTop = subTops.item(subTops.length - 1)
			if (lastSubTop === null) {
				lastSubTop = document.querySelector(`.top[data-self="${r.dataset.top}"] + .type`)
			}

			if (lastSubTop !== null) {
				const other = Array.from(document.querySelectorAll(`[data-i="${r.dataset.i}"]`))
				console.log(other)
				lastSubTop.after(...other)
			}
		}
	}

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

	handlerTop(event) {
		const topEl = event.target.closest('.top')

		const records = document.querySelectorAll(`.record[data-top="${topEl.dataset.self}"]`)
		for (const r of records) {
			r.classList.toggle('show')
		}
	}
}