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

export class N2PageHistory extends CustomHTMLElement {
	static PAGESIZE = 15

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

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

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

			<div class="group-label">Actions</div>
			<div class="group">
				<button data-el="download-history">Fetch all history from server</button>
			</div>


			<div class="group-label">History</div>
			<div class="group">
				<div data-el="nodes"></div>

				<div data-el="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())
		this.elDownloadHistory.addEventListener('click', () => this.downloadHistory())

		_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}`

		if (this.nodesTotal <= N2PageHistory.PAGESIZE)
			this.elPagination.style.display = 'none'
		else
			this.elPagination.style.display = ''

		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)
	}

	async downloadHistory() {
		try {
			const nodes = []
			let offset = 0
			let hasMore = true

			while (hasMore) {
				const history = await this.downloadHistoryPage(offset)
				hasMore = history.HasMore
				for (const nodeData of history.Nodes) {
					nodes.push(new Node(nodeData))
				}
				offset = nodes.length
			}

			let num = 0
			for (const node of nodes) {
				const ok = await nodeStore.nodesHistory.hasNode(node.UUID, node.get('Updated'))
				if (ok) num++
				await nodeStore.nodesHistory.add(node)
			}
			console.log(num)

		} catch (e) {
			console.error(e)
			alert(e)
		}
	}

	async downloadHistoryPage(offset) {
		const res = await fetch(`/node/history/retrieve/${this.node.UUID}/${offset}`, {
			headers: {
				"Authorization": 'Bearer ' + localStorage.getItem('token'),
			}
		})
		const json = await res.json()

		if (!json.OK) {
			alert(json.Error)
			return
		}

		return json
	}
}
customElements.define('n2-pagehistory', N2PageHistory)