h = require 'maquette' .h
Modal = require './modal.ls'

TaskCreationModal = (project, todod-ws, task) ->
	task ||= {}

	self = {
		title: task.title || ""
		description: task.description || ""
		columns: []
		column: void
	}

	modal = Modal {
		+visible
		content-render: (self) ->
			h \div.form [
				h \input.input {
					value: self.title
					oninput: (e) ->
						self.title := e.target.value
				}

				h \textarea {
					value: self.description
					oninput: (e) ->
						self.description := e.target.value
				}

				h \aside.menu [
					h \p.menu-label [ "Choose the column" ]
					h \ul.menu-list project.extra_properties.columns.map (column) ->

						h \li [
							h \a  {
								classes: {
									is-active: self.extra_properties && self.extra_properties.column == column.id
								}
								onclick: ->
									self.column := column.id
							} [ column.title ]
						]
				]
			]
		on-validation: ->
			if task.id
				todod-ws.edit-task task.id, {
					title: self.title
					description: self.description
					extra_properties: {
						column: self.column || ""
					}
				}
			else
				todod-ws.add-task project.id, self.title, {
					description: self.description
					extra_properties: {
						column: self.column || ""
					}
				}
	}, self

	self.render = ->
		modal.render!

	self

module.exports = TaskCreationModal