Controller  = window.require 'spine/controller'
Container   = window.require 'spine/controller/container'

List 		= require './list'
Dropdown 	= require '../../../core/controls/dropdown'
Skin		= window.require 'core/models/skin'
class Selector extends Controller
	className : 'skin-presets'
	@include Container
	canExpand: true

	controllers: list: List

	elements:
		'.toggle-skin-edit':'btn'

	events:
		'click .toggle-skin-edit': 'toggleState'
		'mouseleave .toggle-skin-edit': 'onMouseLeaveBtn'

	constructor : ->
		super
		@prepend (require '../../views/presetslist-header'), $ '<span class="after">'
		@toggleState()

	hasPendingChange: => @list.pending

	initSave: ->
		@list.initSave()

	refresh: (skins) ->
		@list.refresh skins

	select: (id, force) -> @list.select id, force

	toggleState: =>
		do if @canExpand and @state is 'expanded' then @editSkinState else @expand

	expand: =>
		return @initSave() if @hasPendingChange()
		@btn.addClass 'no-hover'
		@el.addClass 'expanded'
		@list.setState @state = 'expanded'

	editSkinState: =>
		@btn.addClass 'no-hover'
		@el.removeClass 'expanded'
		@list.setState @state = 'contracted'

	toggleBtn: (toggle) =>
		@btn.toggleClass 'no-action', if toggle? and typeof toggle is 'boolean' then toggle else @hasPendingChange()

	hideEditBtn: =>
		@canExpand = !@btn.hide()

	onMouseLeaveBtn: =>
		@btn.removeClass 'no-hover'

module.exports = Selector
