/// //////////////////////////////////////////////////////////
// TabManager
// By Philippe Leefsma, April 2016
//
/// //////////////////////////////////////////////////////////
import UIComponent from 'UIComponent'
import 'dragula/dist/dragula.min.css'
import dragula from 'dragula'
import './TabManager.scss'

export default class TabManager extends UIComponent {
  /// ////////////////////////////////////////////////////////////////
  //
  //
  /// ////////////////////////////////////////////////////////////////
  constructor (container, opts = {}) {
    super()

    this.tabsHeaderId = this.guid()
    this.containerId = this.guid()
    this.class = this.guid()
    this.nbTabs = 0

    var html = `
      <div id="${this.containerId}" class="c${this.class} sbtabs">
        <ul id="${this.tabsHeaderId}" class="headers">
        </ul>
      </div>
    `

    $(container).append(html)

    if (opts.allowDrag) {
      this.drake = dragula(
        [$(`#${this.tabsHeaderId}`)[0]],
        { removeOnSpill: false })

      var drakeEvents = [
        'drag', 'dragend', 'drop', 'cancel', 'remove'
      ]

      drakeEvents.forEach((event) => {
        this.drake.on(event, () => {
          this.emit('drake.' + event, arguments)
        })
      })
    }
  }

  /// ////////////////////////////////////////////////////////////////
  //
  //
  /// ////////////////////////////////////////////////////////////////
  addTab (tabInfo) {
    this.nbTabs++

    var tabHeaderLinkId = this.guid()
    var tabHeaderId = this.guid()

    var tabId = this.guid()

    var tabHtml = `
      <li id="${tabHeaderId}" tabId="${tabId}">
        <a id="${tabHeaderLinkId}" tabId="${tabId}" class="sbtab-link">
          <label tabId="${tabId}">
            ${tabInfo.name}
          </label>
        </a>
      </li>
    `

    $('#' + this.tabsHeaderId).append(tabHtml)

    var nbTabs = this.nbTabs

    $(`#${this.tabsHeaderId} > li`).each(function (idx) {
      $(this).css({
        width: `calc(${99 / nbTabs}% - 2px)`,
        left: `calc(${idx * (99 / nbTabs)}% + 2px)`
      })
    })

    var containerHtml = `

      <div id="${tabId}">
        ${tabInfo.html}
      </div>
    `

    $('#' + this.containerId).append(containerHtml)

    if (tabInfo.active) { this.setActiveTab(tabId) }

    $('#' + tabHeaderLinkId).click((e) => {
      var id = $(e.target).attr('tabId')

      this.setActiveTab(id)
    })

    return tabId
  }

  /// ////////////////////////////////////////////////////////////////
  //
  //
  /// ////////////////////////////////////////////////////////////////
  setActiveTab (tabId) {
    var _this = this

    $(`.c${this.class} .sbtab-link`).each((idx, element) => {
      var id = $(element).attr('tabId')

      if (id != tabId) {
        $(element).removeClass('active')
        $('#' + id).css('display', 'none')

        _this.emit('tab.visible', {
          id: id,
          name: $(element).text()
        })
      } else {
        $(element).addClass('active')
        $('#' + id).css('display', 'block')
      }
    })
  }

  /// ////////////////////////////////////////////////////////////////
  //
  //
  /// ////////////////////////////////////////////////////////////////
  clear () {
    $(`#${this.tabsHeaderId} > li`).remove()
    $(`#${this.containerId} > div`).remove()

    this.nbTabs = 0
  }
}
