h     = require 'maquette' .h
bulma = require "./bulma.ls"
Task  = require "./task.ls"

module.exports = {

	new: (self, model) ->
		self.tasks = self.tasks.map (e) -> Task.new e, self, model

		self.render-column = (column) ->
			h \div.column.is-3 {
				key: column.id
			} [
				h \div.card.is-column-header {
					key: column.id
				} [
					h \div.card-header [
						if model.editing == column.id + ".title"
							h \input.input {
								type: "text",
								value: column.name
								onchange: (e) ->
									console.log "onchange??"
									model.editing := undefined

									model.todod-ws.edit-column self.id, column.id, {
										name: e.target.value
									}
							}
						else
							h \div.card-header-title [
								bulma.title 3 column.name
							]

						h \a.card-header-icon {
							key: "edit"
							onclick: ->
								if model.editing == column.id + ".title"
									model.editing := undefined
								else
									model.editing := column.id + ".title"
						} [
							"Edit"
						]

						if self.tasks.filter((.column == column.id)).length == 0
							h \a.card-header-icon {
								key: "delete"
								onclick: ->
									model.editing := column.id + ".delete"
							} [
								"Delete"
							]
					]
					if model.editing == column.id + ".delete"
						h \div.card-content [
							h \div.button.is-fullwidth.is-danger {
								onclick: ->
									model.todod-ws.delete-column self.id, column.id
							} [ "Delete me!"]
						]
				]

				for task in self.tasks
					continue if task.column != column.id

					task.render!

				h \div.button.is-fullwidth {
					onclick: ->
						model.todod-ws.new-task self.id, column.id, {
							title: "General Kenobi…"
							description: ""
						}
				} [ "New task" ]
			]

		self.render = ->
			h \div.project {
				key: self.id
			} [
				h \div.hero.is-dark { key: "title" } [
					h \div.hero-body [
						# FIXME: Consider using a .level for this.
						h \div.is-pulled-right {
							onclick: ->
								model.editing := self.id + ".name"
						} [
							"Edit"
						]

						if model.editing == self.id + ".name"
							h \input.input {
								onchange: (e) ->
									model.editing := undefined
									model.todod-ws.edit-project self.id, {
										name: e.target.value
									}
								value: self.name
							}
						else
							h \div.title [ self.name ]
					]
				]

				h \div.columns [
					for dom in self.columns.map((column) -> self.render-column(column))
						dom

					h \div.column.is-2 {
						key: "new-column"
					} [
						h \div.button.is-fullwidth {
							onclick: ->
								model.todod-ws.new-column self.id, "Hello, there!"
						} [ "New Column" ]
					]
				]
			]

		self
}