React = require 'react'

{div} = React.DOM

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

SelectPvrOption = React.createClass
  
  displayName: 'SelectPvrOption'
    

  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
        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