react-navbar.coffee

define [
  'common', 'underscore', 'react', 'backbone'
], (
  common, _, React, Backbone,
) ->

  R = React.DOM


  Brand = React.createClass

    render: ->
      R.a
        href: "#"
        className: "navbar-brand"
        common.appName


  CollapsedNavToggle = React.createClass

    render: ->
      R.div
        className: "navbar-toggle"
        "data-toggle": "collapse"
        "data-target": ".navbar-collapse"
        children: [
          R.span
            className: "sr-only"
            "Toggle Navigation"
        # three decorative bars
        ].concat _.range(3).map -> R.span className: "icon-bar"


  ActionBar = React.createBackboneClass

    mixins: [
        React.BackboneMixin("actions")
    ]

    #
    # RENDERING
    #
    render: ->
      R.ul
        className: 'nav navbar-nav'
        children: @getDropdown()

    getDropDownToggle: ->
      R.a
        className: "dropdown-toggle"
        "data-toggle": "dropdown"
        href: '#'
        children: [
          R.span null, 'Actions'
          R.b className: "caret"
        ]

    getActionsUl: ->
      R.ul
        className: "dropdown-menu"
        role: "menu"
        children: @props.actions.map (action) =>
          R.li
            key: action.id
            children:
              R.a
                href: '#'
                onClick: @handleActionClick
                'data-action-id': action.id
                children:
                  action.get('name')

    getDropdown: ->
      R.li
        className: 'dropdown'
        children: [
          @getDropDownToggle()
          @getActionsUl()
        ]

    #
    # EVENTS
    #
    handleActionClick: (event) ->
      # launch command handler registered for selected action
      Backbone.Radio.Commands.command(event.target.dataset.actionId)


  FilterSelect = React.createBackboneClass

    mixins: [
        React.BackboneMixin("filter")
    ]

    onSelectChange: (event) ->
      @props.filter.selectValue(event.target.value)

    render: ->
      R.select
        ref: 'select'
        className: 'form-control'
        value: @props.filter.get('value')
        onChange: @onSelectChange
        children: _.map @props.filter.get('choices'), (option) ->
          R.option
            key: option.value
            value: option.value
            children: option.name


  FilterBar = React.createClass

    render: ->
      R.ul
        className: 'nav navbar-nav pull-right'
        children: [
          R.li
            children:
              R.a
                href: "#"
                children:
                  @props.filter.get('name')
          R.li
            className: 'navbar-form'
            children: FilterSelect(filter: @props.filter)
        ]


  UserBar = React.createBackboneClass

    mixins: [
        React.BackboneMixin("account")
    ]

    render: ->
      R.ul
        className: 'nav navbar-nav pull-right'
        children: [
          R.li
            children:
              R.a
                href: '#'
                children:
                  R.span null, @props.account.get('username')
          R.li
            children:
              R.a
                href: '#'
                children: [
                  R.span
                    className: 'glyphicon glyphicon-user'
                  ' Logout'
                ]
        ]

  NavbarView = React.createBackboneClass

    render: ->
      R.div
        className: "navbar navbar-inverse navbar-fixed-top"
        children:
          R.div
            className: "container-fluid"
            children: [
              R.div(
                className: "navbar-header"
                children: [
                  CollapsedNavToggle()
                  Brand()
                ]
              )
              R.div(
                className: 'collapse navbar-collapse'
                children: [
                  ActionBar
                    actions: @props.actions
                  UserBar
                    account: @props.account
                ].concat @props.filters.map (filter) ->
                  FilterBar
                    filter: filter
              )
            ]

  {
    NavbarView
  }