
Activateable = window.require 'spine/controller/activateable'
Controller   = window.require 'spine/controller'

Skin 		 = window.require 'core/models/skin'

class SkinItem extends Controller
	className:'presets-list-item'
	@include Activateable
	template:'editor/views/skinitem'
	events:
		'click':'active'
		'mouseenter .presets-list-colors' 	: '_enter'
		'click .presets-list-delete'		: 'initDelete'
		'click .cancel' 					: 'cancelSave'
		'click .save' 						: 'initSave'


	interval: 0
	height: 60

	constructor: (opts) ->
		opts.tag = unless opts.item.user_id? then 'span' else 'div'
		super
		#changes={}
		@uses(@item,{used:true}).$addClass unless @item.user_id? then 'is-preset' else 'isnt-preset'
		@colors = Skin.meta(@item.widget_id).colorAttributes.concat()
		@render()
		@item.freeze()
		@listenTo @item, 'update', @uses
		# @listenTo @item, 'selected', => @active({selected: true})
		@listenTo @item, 'update', @allChanges

	added: =>
		super
		@reposition true
		@delay => @el.addClass 'skin--added'

		@

	initSave: -> @$trigger 'saveItem', {@item,controller:@}

	uses: (item,options={}) =>
		return @ unless options.used
		@el.toggleClass('can-delete',item.user_id? and (not Boolean(item.uses>>0)))
		@

	###
	Add events on activate
	###
	activate: (options) =>
		return @ if @isActive() and options.force isnt true
		Activateable.activate.apply(@, arguments)
		@$trigger 'SkinItem:activate', $.extend {}, options, {item: @}
		@$trigger 'SkinItem:selected', @item
		@

	###
	Cleanup events when deactivated
	###
	deactivate: =>
		Activateable.deactivate.apply(@, arguments)
		if @_countChanges() > 0
			@cancelSave()
		@

	allChanges: (item, options={}) =>
		return if options.used
		attr = options.attribute
		colorAtts = Skin.meta(item.widget_id).colorAttributes
		if attr?
			(@changes or= {})[attr] = 1
			@$trigger('changed').$addClass('changed').$('.total').text 	count = @_countChanges()
			@$('.text').text if count is 1 then 'change' else 'changes'

			return if colorAtts.indexOf(attr)<0

		colors = if attr? then [attr] else colorAtts
		@$("[data-name='#{color}']").css backgroundColor : @item[color] for color in colors


	cancelSave: =>
		@changes = {}
		@$removeClass('changed').$trigger('cancel').item.reset()

	override: ->
		@changes = {}
		@$removeClass('changed').$trigger('cancel').item.freeze()

	initDelete: (e) ->
		e.stopImmediatePropagation()
		e.preventDefault()
		@$trigger 'deleteItem', {@item,controller:@}

	_countChanges: ->
		(a for a,b of @changes).length

	_enter: (e) =>
		e.preventDefault() if @state() is 'expanded'

	state: =>
		@parent().state

	width: =>
		{expanded: 245, contracted: 100}[@state()]

	getPosition: =>
		if @state() is 'expanded'
			top: -20+@height*parseInt @index/2
			left: @width()*(@index%2)
		else
			top: -20+@height*@index
			left: 0

	reposition: (force_read) =>
		@index = @el.index() or 0 if force_read
		@el.css @getPosition()

	positionOnChange: (active, offset) =>
		return @el.css top: offset-20, left: 0 if @isActive()
		@el.css left: 0, top: -20+@height*(@index - active) + if active < @index then 440+offset else offset

module.exports = SkinItem
