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

col-to-lines = (column, self) ->
	h \div.field.has-addons {
		key: "field" + column.id
	} [
		h \p.control.is-expanded [
			h \input.input {
				key:     "input" + column.id
				value:     column.title
				oninput: (e) ->
					self.extra_properties.columns.find((.id == column.id)).title := e.target.value
			} [ ]
		]

		h \div.control.button.is-danger.is-outlined {
			key: "button" + column.id
			onclick: ->
				self.extra_properties.columns := self.extra_properties.columns.filter((.id != column.id))
		} [ "DELETE" ]
	]

# <div class="field has-addons">
# 	<p class="control">
# 		<input class="input" type="text" placeholder="Your email">
# 	</p>
# 	<p class="control">
# 		<a class="button is-static">
# 			@gmail.com
# 		</a>
# 	</p>
# </div>

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
			new-col[k] = v
		columns-copy ++= [ new-col ]

	self = {
		title: project.title || ""
		permissions: project.permissions || [[]]
		new-user: "New user"
		new-column-input: {
			title: "New column !"
		}

		extra_properties:
			columns: columns-copy
	}

	modal = Modal {
		+visible
		content-render: (self) ->
			h \div.form [

				bulma.field [
					bulma.label "Project title"

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

				h \hr []

				bulma.field [
					bulma.label "Adding a user"
					bulma.input {
						value: self.new-user
						oninput: (e) ->
							self.new-user := e.target.value

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

				h \hr []

				h \aside.menu [
					h \p.menu-label [ "Permissions" ]
					h \ul.menu-list self.permissions.map (permission) ->
							h \li [
								h \p permission.map (e, index) ->
									if index == 0
										"Permissions '" + e + "': "
									else
										"" + e + ", "
							]
				]

				h \hr []

				h \p [ "Choose the columns" ]

				for dom in (self.extra_properties.columns.map (column) -> col-to-lines column, self)
					dom

				h \hr []

				h \div.field.has-addons {
					key: "adding-field"
				} [
					h \p.control.is-expanded [
						h \input.input {
							value:     self.new-column-input.title
							oninput: (e) ->
								self.new-column-input.title := e.target.value
						} [ ]
					]

					h \div.control.button.is-success.is-outlined {
						onclick: ->
							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