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

export class SmonDashboard extends CustomHTMLElement {
	static {
		this.tmpl = document.createElement('template')
		this.tmpl.innerHTML = `
			<style>
				:host {
					display: grid;
				}

				.el-grid {
					display: grid;
					grid-auto-flow: column;
					grid-auto-columns: min-content;
					grid-gap: 8px 16px;
					
				}
			</style>

			<div data-el="grid">
			</div>
		`
	}
	constructor() {
		super(true)
		const script = this.querySelector('script')
		this.data = JSON.parse(script.textContent)
		this.render()
	}

	render() {
		const widgets = []
		for (const wd of this.data.Widgets) {
			const widget = SmonWidget.create(wd.Type, wd)
			widgets.push(widget)
		}
		this.elGrid.replaceChildren(...widgets)
	}
}

class SmonWidget extends CustomHTMLElement {
	static create(t, data) {
		switch (t) {
			case 0: return new SmonWidgetLabel(data)
			case 1: return new SmonWidgetOnOff(data)
		}
	}

	constructor(data) {
		super(true)
		this.data = data
	}

	render() {
		this.style.gridColumn = this.data.X
		this.style.gridRow = this.data.Y
	}
}

class SmonWidgetLabel extends SmonWidget {
	static {
		this.tmpl = document.createElement('template')
		this.tmpl.innerHTML = `
			<style>
				.el-label {
					font-weight: bold;
					font-size: 1.5em;
					margin-bottom: 8px;
				}
			</style>
			<div data-el="label"></div>
		`
	}

	constructor(data) {
		super(data)
		this.render()
	}

	render() {
		super.render()
		this.elLabel.innerText = this.data.Attributes?.Label || '[set Label]'
	}
}

class SmonWidgetOnOff extends SmonWidget {
	static {
		this.tmpl = document.createElement('template')
		this.tmpl.innerHTML = `
			<style>
			:host {
				display: grid;
				grid-template-columns: min-content 1fr;
				align-items: center;
				grid-gap: 8px;

				font-size: 1.25em;
			}
			</style>
			<img data-el="status">
			<div data-el="label"></div>
		`
	}

	constructor(data) {
		super(data)
		this.render()
	}

	render() {
		super.render()

		let img
		switch (this.data.Attributes.Status) {
			case 'ON':
				img = 'widget_light_green.svg'
				break

			case 'OFF':
				img = 'widget_light_red.svg'
				break

			default:
				img = 'widget_light_off.svg'
		}

		this.elStatus.setAttribute('src', `/images/${_VERSION}/${img}`)
		this.elLabel.innerText = this.data.Attributes.Label
	}
}


customElements.define("smon-widget", SmonWidget)
customElements.define("smon-widget-label", SmonWidgetLabel)
customElements.define("smon-widget-onoff", SmonWidgetOnOff)
customElements.define("smon-dashboard", SmonDashboard)