import { CustomHTMLElement } from './lib/custom_html_element.mjs'

export class N2PageHistory extends CustomHTMLElement {
	static PAGESIZE = 25

	static {
		this.tmpl = document.createElement('template')
		this.tmpl.innerHTML = `
			<style>
				n2-pagehistory {
					margin-top: 32px;

					.layout {
					}
				}
			</style>

			<div class="layout">
				<img data-el="back-image" src="/images/${_VERSION}/icon_back.svg" class="colorize">
				<div data-el="back-text">Back to node</div>

				<img src="/images/${_VERSION}/icon_history.svg" class="colorize">
				<h1 data-el="node-name"></h1>

				<div data-el="nodes"></div>

				<div class="pagination">
					<div data-el="prev">&lt;</div>
					<div data-el="page"></div>
					<div data-el="next">&gt;</div>
				</div>
			</div>
		`
	}

	constructor() {
		super()

		this.setAttribute('tabindex', '-1')
		this.addEventListener('keydown', event => this.keyHandler(event))

		// Connect back icon and text to give the user a way back to the node.
		this.elBackImage.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
		this.elBackText.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
		this.elPrev.addEventListener('click', () => this.prevPage())
		this.elNext.addEventListener('click', () => this.nextPage())

		_mbus.subscribe('NODE_UI_OPEN', async (event) => {
			await this.useNode(event.detail.data)
			this.render()
		})
	}

	async useNode(node) {
		this.node = node
		this.page = 1

		this.nodesTotal = await nodeStore.nodesHistory.count(this.node.UUID)
		this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
	}

	keyHandler(event) {
		switch (event.key) {
			case 'ArrowLeft':
				this.prevPage()
				break
			case 'ArrowRight':
				this.nextPage()
				break
		}
	}

	prevPage() {
		if (this.page == 1)
			return
		this.page--
		this.render()
	}

	nextPage() {
		if (this.page >= this.pages)
			return
		this.page++
		this.render()
	}

	formatSize(s) {
		let div = 1
		let unit = 'B'
		if (s >= 1048576) {
			div = 1048576
			unit = 'MB'
		} else if (s >= 1024) {
			div = 1024
			unit = 'kB'
		}

		return new Intl.NumberFormat(undefined, {
			maximumFractionDigits: 0
		}).format(Math.round(s / div)) + ' ' + unit
	}

	async render() {
		this.elNodeName.innerText = this.node.get('Name')
		this.elPage.innerText = `${this.page} / ${this.pages}`

		let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
		let i = 0
		let divs = nodes.map(n => {
			i++

			const date = n.get('Updated').slice(0, 10)
			const time = n.get('Updated').slice(11, 19)

			const div = document.createElement('div')
			div.innerHTML = `
				<div class="index">${1 + this.nodesTotal - (N2PageHistory.PAGESIZE * (this.page - 1) + i)}</div>
				<div class="updated"><span class="date">${date}</span> <span class="time">${time}</span></div>
				<div class="size">${this.formatSize(n.get('Content').length)}</div>
				<div class="name">${n.get('Name')}</div>
			`
			div.classList.add('history-node')
			return div
		})
		this.elNodes.replaceChildren(...divs)
	}
}
customElements.define('n2-pagehistory', N2PageHistory)