window.Spina = {}

Trix.config.blockAttributes = $.extend Trix.config.blockAttributes, {
  heading2:
    tagName: "h2"
    terminal: true
    breakOnReturn: true
    group: false
  heading3:
    tagName: "h3"
    terminal: true
    breakOnReturn: true
    group: false
  heading4:
    tagName: "h4"
    terminal: true
    breakOnReturn: true
    group: false
  heading5:
    tagName: "h5"
    terminal: true
    breakOnReturn: true
    group: false
  heading6:
    tagName: "h6"
    terminal: true
    breakOnReturn: true
    group: false
}

Trix.config.lang = $.extend Trix.config.lang, {
  image: "Image"
  heading1: "H1"
  heading2: "H2"
  heading3: "H3"
  heading4: "H4"
  heading5: "H5"
  heading6: "H6"
}

Trix.config.toolbar =
  getDefaultHTML: -> """
    <div class="trix-button-row">
      <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
        <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="#{Trix.config.lang.bold}" tabindex="-1">#{Trix.config.lang.bold}</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="#{Trix.config.lang.italic}" tabindex="-1">#{Trix.config.lang.italic}</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="#{Trix.config.lang.link}" tabindex="-1">#{Trix.config.lang.link}</button>
      </span>
      <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
        <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading1" title="#{Trix.config.lang.heading1}" tabindex="-1">#{Trix.config.lang.heading1}</button>
        <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading2" title="#{Trix.config.lang.heading2}" tabindex="-1">#{Trix.config.lang.heading2}</button>
        <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading3" title="#{Trix.config.lang.heading3}" tabindex="-1">#{Trix.config.lang.heading3}</button>
        <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading4" title="#{Trix.config.lang.heading4}" tabindex="-1">#{Trix.config.lang.heading4}</button>
      </span>

      <span class="trix-button-group trix-button-group--block-tools">
        <button type="button" class="trix-button trix-button--icon trix-button--icon-image" data-trix-attribute="image" data-trix-action="image" title="#{Trix.config.lang.image}" tabindex="-1">#{Trix.config.lang.image}</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" title="#{Trix.config.lang.quote}" tabindex="-1">#{Trix.config.lang.quote}</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" title="#{Trix.config.lang.code}" tabindex="-1">#{Trix.config.lang.code}</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="#{Trix.config.lang.bullets}" tabindex="-1">#{Trix.config.lang.bullets}</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="#{Trix.config.lang.numbers}" tabindex="-1">#{Trix.config.lang.numbers}</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level" data-trix-action="decreaseNestingLevel" title="#{Trix.config.lang.outdent}" tabindex="-1">#{Trix.config.lang.outdent}</button>
        <button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" title="#{Trix.config.lang.indent}" tabindex="-1">#{Trix.config.lang.indent}</button>
      </span>

      <span class="trix-button-group-spacer"></span>
    </div>
    <div class="trix-button-row">
      
    </div>
    <div class="trix-dialogs" data-trix-dialogs>
      <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
        <div class="trix-dialog__link-fields">
          <input type="text" name="href" class="trix-input trix-input--dialog" placeholder="#{Trix.config.lang.urlPlaceholder}" aria-label="#{Trix.config.lang.url}" required data-trix-input>
          <div class="trix-button-group">
            <input type="button" class="trix-button trix-button--dialog" value="#{Trix.config.lang.link}" data-trix-method="setAttribute">
            <input type="button" class="trix-button trix-button--dialog" value="#{Trix.config.lang.unlink}" data-trix-method="removeAttribute">
          </div>
        </div>
      </div>
    </div>
  """

class Spina.TrixAttachment
  @imageSelect: (e) ->
    toolbar_id = $(this).closest('trix-toolbar').attr('id')
    $.getScript("<%= Spina::Engine.routes.url_helpers.admin_media_picker_path %>" + "?input=#{toolbar_id}&mode=trix")

  @imageInsert: (e) ->
    labels = []
    labels.push "✍️ #{e.detail.alt}" if e.detail.alt != ""
    labels.push "🔗 #{e.detail.link_to_url}" if e.detail.link_to_url != ""
    label = labels.join("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")

    if e.detail.link_to_url != ""
      attachment = new Trix.Attachment({content: "<a href='#{e.detail.link_to_url}' class='trix-attachment-spina-image' data-label='#{label}'>
        <img src='#{e.detail.url}' alt='#{e.detail.alt}' />
      </a>"})
    else
      attachment = new Trix.Attachment({content: "<span class='trix-attachment-spina-image' data-label='#{label}'>
        <img src='#{e.detail.url}' alt='#{e.detail.alt}' />
      </span>"})

    this.editor.insertAttachment(attachment)

document.addEventListener 'trix-file-accept', (e) ->
  e.preventDefault()

$(document).on 'click', '[data-trix-attribute="image"]', Spina.TrixAttachment.imageSelect

$(document).on 'image-insert', 'trix-editor', Spina.TrixAttachment.imageInsert

$(document).on 'click', 'a.trix-attachment-spina-image', (e) ->
  e.preventDefault()