maquette = require "maquette"

{create-projector, h} = maquette

projector = create-projector!

bulma = require "maquette-bulma"

AuthWS = require "./authws.js"

LoginForm = require "./login-form.js"
UserConfigurationPanel = require "./user-configuration-panel.js"
UserAdminPanel = require "./user-admin-panel.js"

model = {
	token: void
}

authws-url = "ws://localhost:9999/auth.JSON"

document.add-event-listener \DOMContentLoaded ->
	user-config-panel = void
	user-admin-panel  = void

	login-form = LoginForm {
		enable-registration: true
		authws-url: authws-url

		on-login: (user, token) ->
			model.user := user
			model.token := token

			if false # user.groups.find (== "authd")
				user-admin-panel := UserAdminPanel {
					authws-url: authws-url
					user: model.user
					token: model.token

					on-model-update: ->
						projector.schedule-render!
					on-logout: ->
						model.token := void
						model.user := void
				}
			else
				user-config-panel := UserConfigurationPanel {
					authws-url: authws-url
					user: model.user
					token: model.token

					on-model-update: ->
						projector.schedule-render!
					on-logout: ->
						model.token := void
						model.user := void
				}

			projector.schedule-render!
		on-error: (error) ->
			projector.schedule-render!
	}

	projector.append document.body, ->
		h \div.body [
			if model.token == void
				h \div.section.hero.is-fullheight [
					h \div.hero-body [
						h \div.container [
							h \div.columns [
								h \div.column []
								h \div.column.is-3 [
									login-form.render!
								]
								h \div.column []
							]
						]
					]
				]
			else if user-config-panel
				h \div.section [
					h \div.container [
						user-config-panel.render!
					]
				]
			else if user-admin-panel
				h \div.section [
					h \div.container [
						user-admin-panel.render!
					]
				]
		]