# @cjsx React.DOM $ = require('jquery') React = require('react') Edit = require('./edit') CardModel = require('../models/card') ModalTrigger = require('react-bootstrap/lib/ModalTrigger') helpers = require('../helpers') config = require('../config')

module.exports = React.createClass

displayName: 'Header'

getInitialState: ()->
  searchText: ''
  isCheckedIncludeContent: false

componentWillMount: ()->
  console.log '[views/header] component will mount'
  @onSync = ()=>
    console.log '[views/header] onSync callback'
    @card = new CardModel()
    @card._isNew = true
    @card.on 'sync', @onSync
    @forceUpdate()
  @onSync()

  @callback = ()=>
    if @props.router.query
      searchText = []
      if @props.router.query.tags
        for tag in @props.router.query.tags.split(',')
          searchText.push '#' + tag
      if @props.router.query.title
        searchText.push @props.router.query.title
      @setState searchText: searchText.join(' ')
      if @props.router.query.content
        @setState isCheckedIncludeContent: true
      @forceUpdate()
  @props.router.on "route", @callback

componentWillUnmount: ->
  console.log '[views/header] component will unmount'
  @props.router.off "route", @callback

onChangeIncludeContent: (event)->
  @setState isCheckedIncludeContent: !@state.isCheckedIncludeContent, ()=>
    @search() if @state.searchText != ''

onChangeSearchText: (event)->
  @setState searchText: event.target.value

onKeyDownSearchText: (event)->
  console.log '[views/header] onKeyDownSearchText', event
  if event.keyCode == 13 # ENTER
    event.preventDefault()
    @search()

search: ->
  tags = []
  titles = []
  for searchText in @state.searchText.split(' ')
    if match = searchText.match(/^#(.+)/)
      tags.push(match[1])
    else
      titles.push(searchText)
  query = {}
  query.title = titles.join(' ') if titles.length > 0
  query.content = titles.join(' ') if titles.length > 0 && @state.isCheckedIncludeContent
  query.tags = tags.join(',') if tags.length > 0
  location.hash = '/?' + $.param(query)

render: ->
  <nav className="navbar navbar-default">
    <div className="container-fluid">
      <div className="navbar-header">
        <a className="navbar-brand" onClick={helpers.reload if !config.icon_link} href={if config.icon_link then config.icon_link else "#/"}>
          <img alt="Brand" src={config.root_path + config.icon_path} width="30" height="30" />
        </a>
        <a className="navbar-brand" onClick={helpers.reload} href="#/">
          {config.title}
        </a>
      </div>
      <div>
        <form className="navbar-form navbar-left" role="search">
          <div className="form-group">
            <input type="text" className="form-control" value={@state.searchText} onChange={@onChangeSearchText} onKeyDown={@onKeyDownSearchText} placeholder='Search ...' />
          </div>
          &nbsp;
          <div className="checkbox">
            <label>
              <input type="checkbox" checked={@state.isCheckedIncludeContent} onChange={@onChangeIncludeContent} /> Include content
            </label>
          </div>
        </form>
        <ul className="nav navbar-nav navbar-right">
          <li>
            <ModalTrigger modal={<Edit card={@card} />}>
              <a href="javascript:void(0)">
                <i className="glyphicon glyphicon-plus" />
              </a>
            </ModalTrigger>
          </li>
        </ul>
      </div>
    </div>
  </nav>