import 'preact/debug'
import 'preact/devtools'
//import { signal } from 'preact/signals'
import { h, Component, render, createRef } from 'preact'
import htm from 'htm'
const html = htm.bind(h)

class App extends Component {
	constructor() {//{{{
		super()
		this.websocket = null
		this.websocket_int_ping = null
		this.websocket_int_reconnect = null
		this.wsConnect()
		this.wsLoop()

		this.sessionID = window.localStorage.getItem("sessionID")
	}//}}}
	render() {//{{{
		if(this.sessionID === null) {
			return html`<${Login} />`
		}

		return html`Welcome`;
	}//}}}

	wsLoop() {//{{{
		setInterval(()=>{
			if(this.websocket === null) {
				console.log("wsLoop connect")
				this.wsConnect()
			}
		}, 1000)
	}//}}}
	wsConnect() {//{{{
		this.websocket = new WebSocket(`wss://notes.ahall.se/ws`)
		this.websocket.onopen    = evt=>this.wsOpen(evt)
		this.websocket.onmessage = evt=>this.wsMessage(evt)
		this.websocket.onerror   = evt=>this.wsError(evt)
		this.websocket.onclose   = evt=>this.wsClose(evt)
	}//}}}
	wsOpen() {//{{{
		this.setState({ wsConnected: true })

		// A ping interval to implement a rudimentary keep-alive.
	}//}}}
	wsClose() {//{{{
		console.log("Lost connection to Notes server")
		this.websocket = null
	}//}}}
	wsError(evt) {//{{{
		console.log("websocket error", evt)
		this.websocket = null;
	}//}}}
	wsMessage(evt) {//{{{
		let msg = JSON.parse(evt.data)

		// Broadcast message
		if(msg.ID == '') {
			this.broadcastHandler(msg)
		} else {
			this.msgHandler(msg)
		}
	}//}}}

	broadcastHandler(msg) {//{{{
		switch(msg.Op) {
			case 'css_reload':
				refreshCSS()
				break;
		}
	}//}}}
}

class Login extends Component {
	render() {
		return html`
		<div id="login">
			<h1>Notes</h1>
			<div>
				<input id="username" type="text"     placeholder="Username" />
				<input id="password" type="password" placeholder="Password" />
			</div>
		</div>
		`
	}
}

// Init{{{
//let urlParams = new URLSearchParams(window.location.search)
window._app = createRef()
window._resourceModels = []
render(html`<${App} ref=${window._app} />`, document.getElementById('app'))
//}}}

// vim: foldmethod=marker