h     = require 'maquette' .h
bulma = require "./bulma.ls"
nmd   = require "nano-markdown"
TaskCreationModal = require './task-creation-modal.ls'
TaskRemovalModal = require './task-removal-modal.ls'

{icon} = require "./font-awesome.ls"

display-login = (task, users) ->
	if task.extra_properties && task.extra_properties.assignee-id && users && users[task.extra_properties.assignee-id] && users[task.extra_properties.assignee-id].login
		h \p [ '@' + users[task.extra_properties.assignee-id].login ]
	else
		h \p [ '-' ]


Task = (self, project, todod-ws) ->
	modal = void

	self.render = (args) ->
		args or= {}

		background-color = "grey"
		if self.extra_properties && self.extra_properties.background-color
			background-color = self.extra_properties.background-color

		h "div.card.is-#{background-color}" {
			classes: {
				"is-selected": args.is-selected
			}
			key: self.id
			onclick: (e) ->
				if args.onclick
					args.onclick(e)
		} [
			h \div.card-content [
				h \div.title.is-5 [
					h \a.has-text-grey.is-pulled-right {
						onclick: ->
							modal := TaskCreationModal project, todod-ws, self, project.users
					} [
						icon \cog
					]
					self.title
				]
				h \div.media [
					h \div.media-left [
						# FIXME: assignee card image
					]
					h \div.media-content [
						display-login self, project.users
					]
				]

				if args.is-selected
					h \div.content {
						key: "task-description-#{self.id}"
						after-create: (dom) ->
							dom.innerHTML = nmd self.description
					} [ ]

				if args.is-selected
					h \div.card-footer [
							h \a.card-footer-item.has-text-danger {
								onclick: ->
									modal := TaskRemovalModal project.id, todod-ws, self
							} [ "Destroy" ]
					]
			]

			if modal
				modal.render!
		]

	self

module.exports = Task