# @cjsx React.DOM React = require('react') Edit = require('./edit') ModalTrigger = require('react-bootstrap/lib/ModalTrigger') Glyphicon = require('react-bootstrap/lib/Glyphicon') markdownIt = require('markdown-it')(linkify: true) helpers = require('../helpers') classnames = require('classnames')

module.exports = React.createClass

displayName: 'Card'

componentDidMount: ->
  @props.card.on 'change', @forceUpdate.bind(@, null)

getInitialState: ()->
  showTools: false
  editing: false
  updating: false
  title: @props.card.get('title')
  content: @props.card.get('content')

onMouseOver: ()->
  @setState showTools: true

onMouseLeave: ()->
  @setState showTools: false

showTools: ()->
  helpers.isMobile() || @state.showTools

render: ->
  context = @props.card.query.context
  <div
    className={
      classnames(
        'list-group',
        'col-sm-4': context != 'none',
        'col-xs-12': context != 'none',
        'col-sm-12': context == 'none'
      )
    }
    onMouseOver={@onMouseOver}
    onMouseLeave={@onMouseLeave}
  >
      <div className={classnames('list-group-item', 'carte-card-height': context != 'none')}>
        <div className="carte-card-header">
          {
            if @props.card.get('focused') || @props.card.query.context == 'none'
              <Glyphicon glyph='star' />
          }
          <strong>
            {@props.card.get('title')}
          </strong>
          {
            if @props.card.modelName == 'Card'
              <span className={classnames('pull-right': true, 'tools': true, 'carte-hidden': !@showTools())}>
                <ModalTrigger modal={<Edit card={@props.card} />}>
                  <a href="javascript:void(0)">
                    <Glyphicon glyph='edit' />
                  </a>
                </ModalTrigger>
                &nbsp;
                &nbsp;
                <a href={'#/' + encodeURIComponent(@props.card.get('title'))}>
                  <Glyphicon glyph='link' />
                </a>
              </span>
            else
              <span className={classnames('pull-right': true)}>
                <i className="fa fa-clock-o" />
                &nbsp;
                {@props.card.get('version')}
              </span>
          }
        </div>
        <div className="carte-card-content">
          {
            if @props.card.fetching
              <Glyphicon glyph='refresh' className='glyphicon-refresh-animate' />
            else
              <div dangerouslySetInnerHTML={__html: helpers.parseCardLink markdownIt.render @props.card.get('content') || ''} />
          }
        </div>
        <div className={classnames('carte-hidden': !@showTools())}>
        {
          if @props.card.get("tags")
            @props.card.get("tags").map (tag)->
              <span className="pull-right tools">
                &nbsp;&nbsp;
                <a href={"#/?tags=" + tag}>
                  <Glyphicon glyph='tag' />
                  &nbsp;{tag}
                </a>
              </span>
        }
        </div>
    </div>
  </div>