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

export class N2PageStorage extends CustomHTMLElement {
	static {
		this.tmpl = document.createElement('template')
		this.tmpl.innerHTML = `
			<h1>Local storage</h1>
			<div data-el="count-nodes"></div>
			<div data-el="count-queued-nodes"></div>
			<div data-el="count-history-nodes"></div>
		`
	}
	constructor() {
		super()

		window._mbus.subscribe('SHOW_PAGE', () => this.render())
	}
	async render() {
		const countNodes = await globalThis.nodeStore.nodeCount()
		const countQueuedNodes = await globalThis.nodeStore.sendQueue.count()
		const countHistoryNodes = await globalThis.nodeStore.nodesHistory.count()

		this.elCountNodes.innerText = countNodes
		this.elCountQueuedNodes.innerText = countQueuedNodes
		this.elCountHistoryNodes.innerText = countHistoryNodes
	}
}
customElements.define('n2-pagestorage', N2PageStorage)