h = require 'maquette' .h
Modal = require './modal.ls'
UUID            = require "uuid/v4"

ProjectCreationModal = (project, todod-ws) ->

	self = {
		title: project.title || ""
		extra_properties:
			columns: project.extra_properties.columns || []
	}

	modal = Modal {
		+visible
		new-column-input: "New column !"

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

			h \aside.menu [
				h \p.menu-label [ "Choose the columns" ]

				h \ul.menu-list self.extra_properties.columns.map (column) ->

					h \li [
						h \input.input {
							key:       column.id
							value:     column.title
							oninput: (e) ->
								self.extra_properties.columns.find((.id == column.id)).title := e.target.value
						} [ ]

						h \div.button {
							onclick: ->
								# TODO: create a new entry in self.extra_properties.columns
								self.extra_properties.columns = self.extra_properties.select((.id != column.id))
						} [ "X" ]
					]

				h \input.input {
					value:     self.new-column-input
					oninput: (e) ->
						self.new-column-input := e.target.value
				} [ ]

				h \div.button {
					onclick: ->
						# TODO: create a new entry in self.extra_properties.columns
						self.extra_properties.columns ++= [ self.new-column-input ]
						self.new-column-input := "New column !"
				} [ "+" ]
			]
		]
		on-validation: ->
			if project.id
				todod-ws.edit-list project.id, self
			else
				todod-ws.add-list self.title, self
	}

	self.render = ->
		modal.render!

	self

module.exports = ProjectCreationModal