# @cjsx React.DOM 
$ = require('jquery')
Backbone = require('backbone')
React = require('react')
classnames = require('classnames')
Cards = require('./cards')
Card = require('./card')
CardCollection = require('../models/cards')
Pagination = require('./pagination')
helpers = require('../helpers')
config = require('../config')
Glyphicon = require('react-bootstrap/lib/Glyphicon')

module.exports = React.createClass
  displayName: 'List'

  componentDidMount: ->
    console.log '[views/list] component did mount'
    @props.cards.on 'sync', @forceUpdate.bind(@, null)

  componentWillReceiveProps: (nextProps)->
    console.log '[views/list] component will receive props'
    nextProps.cards.on 'sync', @forceUpdate.bind(@, null)

  atozParam: ()->
    @queryParam {sort: 'title', order: 'asc', page: 1}, []

  latestParam: ()->
    @queryParam {sort: 'updated_at', order: 'desc', page: 1}, []

  randomParam: ()->
    @queryParam {order: 'random'}, ['sort', 'page']

  tagParam: (tag)->
    @queryParam {tag: tag}, []

  queryParam: (param, deleteKeys)->
    query = $.extend {}, @props.cards.query, param
    for key in deleteKeys
      delete query[key]
    $.param(query)

  render: ->
    <div className="container carte-list">
      {if !@props.card && @props.cards.collectionName == 'Cards'
        <div className="row">
          <div className="col-sm-4">
            <ul className="nav nav-pills">
              {
                for menuItem in config.menu_items
                  switch menuItem
                    when 'atoz'
                      <li key='atoz'>
                        <a onClick={helpers.reload} href={"#/?" + @atozParam()}>
                          <span className={classnames('carte-strong': @props.cards.query.sort == 'title' and @props.cards.query.order != 'random')}>A to Z</span>
                        </a>
                      </li>
                    when 'latest'
                      <li key='latest'>
                        <a onClick={helpers.reload} href={"#/?" + @latestParam()}>
                          <span className={classnames('carte-strong': @props.cards.query.sort == 'updated_at' and @props.cards.query.order != 'random')}>Latest</span>
                        </a>
                      </li>
                    when 'random'
                      <li key='random'>
                        <a onClick={helpers.reload} href={"#/?" + @randomParam()}>
                          <span className={classnames('carte-strong': @props.cards.query.order == 'random')}>Random</span>
                        </a>
                      </li>
              }
              <li>
                <a href={"#/tags"}>
                  <Glyphicon glyph='tag' />
                </a>
              </li>
              <li>
                <a href={config.root_path + config.api_path + "/cards.xml?" + @queryParam({}, [])}>
                  <i className="fa fa-rss" />
                </a>
              </li>
              <li>
                <a href={"#/?" + @queryParam({'mode': 'flash'}, [])}>
                  <i className="fa fa-arrows-alt" />
                </a>
              </li>
            </ul>
          </div>
          <div className="col-sm-4">
             <ul className="nav nav-pills nav-justified">
               <li>
                 <a href="javascript:void(0)" className="center-block text-center">
                   <span className="badge">
                     {
                       if @props.cards.pagination
                         @props.cards.pagination.total_entries
                       else
                         <Glyphicon glyph='refresh' className='glyphicon-refresh-animate' />
                     }
                   </span>
                 </a>
               </li>
             </ul>
          </div>
          <div className="col-sm-4">
            {
              if @props.cards.query.order == 'random'
                <ul className="nav nav-pills pull-right">
                  <li>
                    {
                      if @props.cards.pagination
                        <a onClick={helpers.reload} href={"#/?" + @randomParam()}>
                          <Glyphicon glyph='refresh' />
                        </a>
                      else
                        <a href="javascript:void(0)">
                          <Glyphicon glyph='refresh' className='glyphicon-refresh-animate' />
                        </a>
                    }
                  </li>
                </ul>
              else
                <Pagination cards={@props.cards} />
            }
          </div>
        </div>
      else
        if @props.card
          title = @props.card.get('title')
        else
          title = @props.router.title
        <div className="row">
          <div className="col-sm-12">
            <ul className="nav nav-pills">
              <li>
                <a href={"#/" + encodeURIComponent(title) + '?context=title'}>
                  <span className={classnames('carte-strong': @props.card && @props.card.query.context == 'title')}>A to Z</span>
                </a>
              </li>
              <li>
                <a href={"#/" + encodeURIComponent(title) + '?context=updated_at'}>
                  <span className={classnames('carte-strong': @props.card && @props.card.query.context == 'updated_at')}>Latest</span>
                </a>
              </li>
              <li>
                <a href={"#/" + encodeURIComponent(title) + '?context=none'}>
                  <span className={classnames('carte-strong': @props.card && @props.card.query.context == 'none')}>Detail</span>
                </a>
              </li>
              <li>
                <a href={"#/" + encodeURIComponent(title) + '/history'}>
                  <span className={classnames('carte-strong': @props.cards.collectionName == 'CardHistories')}>History</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      } 
      {
        if @props.card && @props.card.query.context == 'none'
          <div className='row'>
            <Card key={@props.card.get("title")} card={@props.card} />
          </div>
        else 
          <Cards cards={@props.cards} card={@props.card} />
      }
      {
        if !@props.card && helpers.isMobile()
          <div className="row">
            <div className="col-sm-12">
              <Pagination cards={@props.cards} />
            </div>
          </div>
      }
    </div>