SelectView

define (require, exports, module) ->

  View = require("famous/core/View")
  Surface = require("famous/core/Surface")
  Transform = require("famous/core/Transform")
  StateModifier = require("famous/modifiers/StateModifier")

  class SelectView extends View
    @DEFAULT_OPTIONS: {
      options: []
    }
    constructor: (options) ->
      super options # set options

      _createSurface.call @

      _setListeners.call @

    getValue: ->
      @value

  _createSurface = ->
    surface = new Surface
      size: [undefined, @options.height]
      content: _composeSelect.call @

    surface.pipe @_eventOutput

    @add surface

  _composeSelect = ->
    selectStart = "<select class=\"#{@options.className}\" name=\"#{@options.name}\">"
    selectEnd = '</select>'
    options = []
    if @options.placeholder
      optionEl = "<option>#{@options.placeholder}</option>"
      options.push optionEl
    for option in @options.options
      option.value = option.name unless option.value
      optionEl = "<option value=\"#{option.value}\">#{option.name}</option>"
      options.push optionEl
    selectStart + '\n' + options.join('\n') + '\n' + selectEnd

  _setListeners = ->
    @_eventOutput.on 'deploy', =>
      document.querySelector("select[name=\"#{@options.name}\"]").onchange = (e) =>
        @value = e.target.value
        @_eventOutput.emit 'change', e


  module.exports = SelectView