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, className, noWrapOptions, disabled} = @props

    className = 'select-pvr-option'
    className += ' is-selected' if isSelected
    className += ' no-wrap' if noWrapOptions
    className += ' is-disabled' if disabled

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

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

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

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


module.exports = SelectPvrOption