Controller = window.require 'spine/controller'

class MonthsController extends Controller
	className: 'months-view'
	template: window.require 'core/views/date-time/grid'
	table: window.require 'core/views/date-time/table'

	elements:
		'.date_time-wrapper table': 'tableEl'
		'.date_time-current':'title'
		'.selected': 'selected'

	events:
		'click .date_time-next': 'nextYear'
		'click .date_time-prev': 'prevYear'
		'click .date_time-cell': '_change'

	constructor: ->
		super
		@months = $.datepickr::l10n.months

	render: ->
		super
		do @renderTable
		@el

	renderTable: ->
		selected = if @year is @date.year then @months.shorthand[@month] else ''
		@tableEl.html @table {cols: 4, selected, data: @months.shorthand}
		@refreshElements()
		@title.html "#{@year}"

	update: (@date) ->
		{@month, @year} = @date
		do @renderTable

	_change: (e) =>
		@selected.removeClass('selected')
		(target = $ e.target).parent().addClass 'selected'
		month = @months.shorthand.indexOf target.text()

		@el.trigger 'change:month', {month, @year}

	nextYear: =>
		@renderTable ++@year
		# @el.trigger 'change:year', year: @year+1

	prevYear: =>
		@renderTable --@year
		# @el.trigger 'change:year', year: @year-1

module.exports = MonthsController
