console = window.require 'spine/utils/console'

Tabs  = window.require 'spine/controller/tabs'
Panel = require './panel'
Skin  = window.require 'core/models/skin'

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

###
The tab class used to render a skin tab.
###
class SkinTab extends Controller
	@include Activateable
	events:
		'click':'active'
	activate: =>
		Activateable.activate.apply @, arguments
		@el.prevAll().not('.hidden').first().addClass('prev-active').siblings().removeClass('prev-active')
		@
	shouldBeHidden:=>@el.position().left + @el.width()> 300

class SkinTabs extends Activator
	containerClass  : 'skin-editor-tabs-list'
	events:
		'click .multi-tabs-toggle':'toggleItem'
		'click .activateable':'hideList'

	hideList:(e)=>
		@popup?.hide()
		controller = $(e.target).controller()
		unless controller.el.hasClass('hidden')
		 	@list.children().removeClass('active')
		@list.children().each (i,el)=>
			$el = $(el)
			if $el.data('tab') is controller
				$el.addClass('active').siblings().removeClass('active')

	toggleItem:(e) =>
		@_createPopup().then => if @popup.visible then @popup.hide() else @popup.show()

	constructor: ->
		super
		console.group 'SkinTabs:constructor'

		@listenTo $(document), 'click', (e) => @popup?.hide() unless $(e.target).is('.multi-tabs-toggle')
		@el.prepend @toggle = $("<div class='multi-tabs-toggle' data-icon='❯'></div>")
		@list 	= $("<div class='multi-tabs-list'></div>")
		@list.on('click', '.multi-tab-item', @tabClick)

		console.groupEnd 'SkinTabs:constructor'

	clear: =>
		console.group 'SkinTabs:clear'
		@list.empty()
		@hadHidden = 0
		@toggle.hide()
		console.groupEnd 'SkinTabs:clear'

	afterAdd:(child)=>
		super
		if child.shouldBeHidden()
			@hadHidden = 1
			child.$addClass('hidden')
			@list.append item = $("<div class='multi-tab-item' data-icon='✓'>#{child.panel.tabTitle}</div>")
			@popup?.resize()
			item.data 'tab', child

	tabClick:(e)=>
		console.log 'tabClick'
		@popup?.hide()
		target = $(e.target)
		@list.children().each (i,el)=>
			$(el).data('tab').$addClass('hidden')
			$(el).removeClass('active')
		target.data('tab').active().$removeClass('hidden')
		target.addClass('active')

	setup:=>
		if @hadHidden is 1
			@toggle.show()
			@lastVisible = @$('.hidden').first().prev().controller()
			child = @lastVisible
			@list.prepend item = $("<div class='multi-tab-item' data-icon='✓'>#{child.panel.tabTitle}</div>")
			@popup?.resize()
			item.data 'tab', child

	_createPopup: ->
		return @popupPromise if @popupPromise
		@popupPromise = Blogvio.UI.popup.new
				copyStyles: false
				topOffset:  5
				leftOffset: -28
				anchor: @toggle
				css: [
					'https://widgetic.com/bundles/blogvioapp/css/editor/editor.css'
				]
			.then (@popup) =>
				@popup.append(@list)
			.fail (err) ->
				console.error err.stack

class SkinEditor extends Tabs
	tabRenderer 		: SkinTab
	className			: 'skin-editor'
	tabContainerClass	: 'skin-editor-tabs'
	tabContainer 		: SkinTabs
	containerClass 		: 'skin-editor-container'

	tabTemplate			: (i)->i.panel.tabTitle

	setAccessLevel: (@accessLevel) ->

	parseMeta: (@meta, composition) =>
		console.group 'SkinEditor.parseMeta'
		child.release() for child in @children()
		@tabs.clear()

		for tabTitle, meta of @meta.tabs
			@append new Panel({meta, tabTitle, composition, @accessLevel})

		@tabs.setup()
		console.groupEnd 'SkinEditor.parseMeta'

	display: (index = 0) ->
		@children()[index]?.active()

	# check if the skin has missing atts, and update it
	updateSkin: (skin) =>
		atts = false
		for _, meta of @meta.tabs
			(atts or= {})[attrName] = attrData.options.default for attrName, attrData of meta when !skin[attrName]?

		skin.updateAttributes atts, {from: @, ajax: false} if atts

	setSkin: (skin) ->
		@updateSkin skin
		@children (panel) ->
			panel.skinLoad(skin)

module.exports = SkinEditor
