React = require 'react'

{div} = React.DOM

###
Select Popover Option, see select_pvr.coffee for docs
###

SelectPvrOption = React.createClass
  
  displayName: 'SelectPvrOption'

  getDefaultProps: ->
     {
      optionHeight: 0
      hasSubLabel: no
      isSelected: no
      noWrapOptions: no
      option:
        isSubHeader: no
        isIndented: no
        disabled: no
    }
    

  render: ->
    {option, isSelected, optionHeight, hasSubLabel, noWrapOptions} = @props
    {isSubHeader, isIndented, info, id, value, subLabel, label, customClass, disabled} = option

    className = 'select-pvr-option'
    className += ' is-selected' if isSelected
    className += ' no-wrap' if noWrapOptions
    className += ' is-disabled' if disabled
    className += ' is-sub-header' if isSubHeader
    className += ' is-indented' if isIndented
    className += " #{customClass}" if customClass?

    if hasSubLabel
      className += ' has-sublabel' 
      lh = optionHeight / 2
    else
      lh = optionHeight

    labelClass = 'label'
    labelClass += ' has-info' if info?

    optionKey = id or value
    
    div {
      key: optionKey
      className: className
      onClick: @handleClick if not isSubHeader
      style:
        height: optionHeight
        lineHeight: "#{lh}px"
    }, [
      div {
        key: 'label'
        className: 'main-label'
      }, [
        div {
          key: 'info'
          className: 'info'
        }, info if info?
        div {
          key: 'label'
          className: labelClass
        }, label if label?
        div {
          key: 'sub-label'
          className: 'sub-label'
        }, subLabel if subLabel?
      ]
    ]

  handleClick: (e) -> 
    e.stopPropagation()
    {handleClick, option, isSelected, canDeselect} = @props
    {disabled} = option
    
    handleClick option unless (isSelected and not canDeselect) or disabled


module.exports = SelectPvrOption