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

maquette-css-transitions = require "maquette-css-transitions"
{create-exit-css-transition, create-enter-css-transition} = maquette-css-transitions

{media, title} = require "./bulma.ls"
{icon} = require "./font-awesome.ls"

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

	self.render-login = (uid) ->
		h \p [
			if user = users-cache.get-user uid
				[
					if avatar = user.profile?.avatar
						h \figure.image.is-32x32.is-pulled-left [
							h \img.is-rounded {
								src=avatar
								alt=""
							}
						]

					'@' + user.login
				]
			else
				'@' + uid.to-string!
		]

	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 [
				media {
					content: [
						title 5 self.title

						if uid = self.assigned_to
							self.render-login uid
					]
					right: [
						h \a.has-text-grey.is-pulled-right {
							onclick: ->
								modal := TaskCreationModal project, todod-ws, self, users-cache
						} [
							icon \cog.visible-on-hover
						]
						h \br
						h \a.has-text-danger.is-pulled-right {
							onclick: ->
								modal := TaskRemovalModal project.id, todod-ws, self
						} [
							icon \skull-crossbones.visible-on-hover
						]
					]
				}

				if args.is-selected && self.description.length > 0
					h \div.content {
						key: "task-description-#{self.id}"
						enter-animation: create-enter-css-transition \fade-in
						exit-animation:  create-exit-css-transition \fade-out
					} [
						# FIXME: It may be more efficient to keep the cached markdown.
						h \div.description {
							after-create: (dom) ->
								dom.innerHTML = nmd self.description
						}
					]
			]

			if modal
				modal.render!
		]

	self

module.exports = Task