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) ->
			console.log "render column: ", column
			bulma.modal {} [(h \div {} [ "rendering " + column ])]

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

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

		# 				h \a.card-header-icon {
		# 					key: "edit"
		# 					onclick: ->

		# 						# FIXME: columns = extra properties
		# 						# if model.editing == column + ".title"
		# 						# 	model.editing := undefined
		# 						# else
		# 						# 	model.editing := column + ".title"
		# 				} [
		# 					"Edit"
		# 				]

		# 				if self.tasks.filter((.column == column)).length == 0
		# 					h \a.card-header-icon {
		# 						key: "delete"
		# 						onclick: ->
		# 							# FIXME
		# 							# model.editing := column + ".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

		# 			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 = ->

			console.log "Project to render: ", self
			h \div.list {} [
				h \div.columns [
					if self.extra_properties.columns
						for dom in self.extra_properties.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" ]
			# 		]
			# 	]
			# ]

			# 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 ]
			# 		]
			# 	]


		self
}