class Kakimasu.TranslationPopover
  constructor: (el) ->
    @$el = $(el)
    @delegateEvents()

  delegateEvents: ->
    @$el.on 'mouseenter', $.proxy(@showPopover, @)

  showPopover: (e) ->
    $translation = $(e.currentTarget)

    token = $('meta[name="csrf-token"]').attr('content')
    url_params = window.location.search
    key = $translation.data('content')
    translations = $translation.data('translations')

    #determine available locales
    locales = $translation.data('locales')
    locales = locales.split /\W+/
    locales.shift()
    locales.pop()

    html = '<div class="popover translation-popover">'
    html += '<div class="close">'
    html += '<p>&times;</p>'
    html += '</div>'
    html += '<form action="/kakimasu/translations'
    html += url_params
    html += '" data-remote="true" method="post">'
    html += '<input type="hidden" name="authenticity_token" '
    html += 'value='
    html += token
    html += '>'
    html += '<input type="hidden" name="key" id="translation-key" value='
    html += key
    html += '>'
    html += '<div class="translation-key">'
    html += key
    html += '</div>'
    for l, index in locales
      html += '<div class="form-group">'
      html += '<div class="row">'
      html += '<div class="col-xs-2">'
      html += "<label for='locale'>#{l}</label>"
      html += '</div>'
      html += '<div class="col-xs-10 translation-input">'
      field_value = translations[index].replace /"/g, '&quot;'
      field_value = '"' + field_value + '"'
      html += "<input class='form-control' type='text' name='#{l}' id='value' value=#{field_value} >"
      html += '</div>'
      html += '<div class="col-xs-10 col-xs-offset-2">'
      html += "<div class='suggested-translation-link'>"
      html += "<a href='#popover-translation-#{index}' data-toggle='collapse'>"
      html += 'suggested translations'
      html += '</a>'
      html += "<div id='popover-translation-#{index}' class='collapse suggested-translation'>"
      html += '<p></p>'
      html += '</div>'
      html += '</div>'
      html += '</div>'
      html += '</div>'
      html += '</div>'
    if $translation.data('unique')
      html += '<p>'
      html += '<label for="Unique">Unique</label>'
      html += '<input type="checkbox" name="lazy_lookup" id="lazy_lookup" value="1"'
      html += 'checked="checked"'
      html += 'disabled'
      html += '>'
      html += '</p>'
    html += '<p class="text-right">'
    html += '<input type="submit" name="commit" value="Save" class="btn btn-primary">'
    html += '</p>'
    html += '</form>'
    html += '</div>'

    $translation.popover
      container: 'body'
      template: html

    $('.popover').remove()
    $('.translation-with-key').css 'background-color', '#FFCCCC'
    $('.translation_missing').css 'background-color', '#FF6666'
    $translation.popover('show')
    $translation.css 'background-color', '#990000'

    $('.close').on 'click', ->
      $(this).closest('.popover').hide()
      $('.translation-with-key').css 'background-color', '#FFCCCC'
      $('.translation_missing').css 'background-color', '#FF6666'