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

ProjectCreationModal = (project, todod-ws) ->

	# work on a copy of the columns
	# in case of cancelled modifications, only the copies are changed
	columns-copy = []
	for col in  project.extra_properties.columns
		new-col = {}
		for k,v of col
			console.log "element : ", k, "value: ", v
			new-col[k] = v
		columns-copy ++= [ new-col ]

	self = {
		title: project.title || ""
		# TODO XXX FIXME
		new-user: "Coucou 2 le retour"
		new-column-input: {
			title: "New column !"
		}

		extra_properties:
			columns: columns-copy
	}

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

				bulma.field [
					console.log "THEAFOEIOEAI JOAEJFOI JOJFOAEJ USER NAME: " + self.new-user
					bulma.label "Valeur actuelle : " + self.new-user
					bulma.label "Adding a user"
					bulma.input {
						value: self.new-user
						oninput: (e) ->
							self.new-user := e.target.value
							console.log "NEW USER NAME: " + self.new-user

						name: \new-user
						id: \user-add
					}
				]

				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 {
							key: column.id
						} [
							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.columns.filter((.id != column.id))
									# self.todod-ws.edit-list
									# todod-ws.edit-list project.id, self
							} [ "X" ]
						]

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

					h \div.button {
						onclick: ->
							# TODO: create a new entry in self.extra_properties.columns
							new-col = {
								id: UUID!
								title: self.new-column-input.title
							}
							self.extra_properties.columns ++= [ new-col ]
							self.new-column-input.title := "New column !"
					} [ "+" ]
				]
			]

		on-validation: ->
			if project.id
				todod-ws.edit-list project.id, self
			else
				todod-ws.add-list self.title, self
	}, self

	self.render = ->
		modal.render!

	self

module.exports = ProjectCreationModal