// const Flickity = require('./flickity')
const TapListener = require('./TapListener')
const utils = require('./utils')

var svgURI = 'http://www.w3.org/2000/svg'

// -------------------------- PrevNextButton -------------------------- //

function PrevNextButton(direction, parent) {
  this.direction = direction
  this.parent = parent
  this._create()
}

PrevNextButton.prototype = new TapListener()

PrevNextButton.prototype._create = function() {
  // properties
  this.isEnabled = true
  this.isPrevious = this.direction == -1
  var leftDirection = this.parent.options.rightToLeft ? 1 : -1
  this.isLeft = this.direction == leftDirection

  var element = (this.element = document.createElement('button'))
  element.className = 'flickity-prev-next-button'
  element.className += this.isPrevious ? ' previous' : ' next'
  // prevent button from submitting form http://stackoverflow.com/a/10836076/182183
  element.setAttribute('type', 'button')
  // init as disabled
  this.disable()

  element.setAttribute('aria-label', this.isPrevious ? 'previous' : 'next')

  // create arrow
  var svg = this.createSVG()
  element.appendChild(svg)
  // events
  this.on('tap', this.onTap)
  this.parent.on('select', this.update.bind(this))
  this.on('pointerDown', this.parent.childUIPointerDown.bind(this.parent))
}

PrevNextButton.prototype.activate = function() {
  this.bindTap(this.element)
  // click events from keyboard
  this.element.addEventListener('click', this)
  // add to DOM
  this.parent.element.appendChild(this.element)
}

PrevNextButton.prototype.deactivate = function() {
  // remove from DOM
  this.parent.element.removeChild(this.element)
  // do regular TapListener destroy
  TapListener.prototype.destroy.call(this)
  // click events from keyboard
  this.element.removeEventListener('click', this)
}

PrevNextButton.prototype.createSVG = function() {
  var svg = document.createElementNS(svgURI, 'svg')
  svg.setAttribute('viewBox', '0 0 100 100')
  var path = document.createElementNS(svgURI, 'path')
  var pathMovements = getArrowMovements(this.parent.options.arrowShape)
  path.setAttribute('d', pathMovements)
  path.setAttribute('class', 'arrow')
  // rotate arrow
  if (!this.isLeft) {
    path.setAttribute('transform', 'translate(100, 100) rotate(180) ')
  }
  svg.appendChild(path)
  return svg
}

// get SVG path movmement
function getArrowMovements(shape) {
  // use shape as movement if string
  if (typeof shape == 'string') {
    return shape
  }
  // create movement string
  return (
    'M ' +
    shape.x0 +
    ',50' +
    ' L ' +
    shape.x1 +
    ',' +
    (shape.y1 + 50) +
    ' L ' +
    shape.x2 +
    ',' +
    (shape.y2 + 50) +
    ' L ' +
    shape.x3 +
    ',50 ' +
    ' L ' +
    shape.x2 +
    ',' +
    (50 - shape.y2) +
    ' L ' +
    shape.x1 +
    ',' +
    (50 - shape.y1) +
    ' Z'
  )
}

PrevNextButton.prototype.onTap = function() {
  if (!this.isEnabled) {
    return
  }
  this.parent.uiChange()
  var method = this.isPrevious ? 'previous' : 'next'
  this.parent[method]()
}

PrevNextButton.prototype.handleEvent = utils.handleEvent

PrevNextButton.prototype.onclick = function() {
  // only allow clicks from keyboard
  var focused = document.activeElement
  if (focused && focused == this.element) {
    this.onTap()
  }
}

// -----  ----- //

PrevNextButton.prototype.enable = function() {
  if (this.isEnabled) {
    return
  }
  this.element.disabled = false
  this.isEnabled = true
}

PrevNextButton.prototype.disable = function() {
  if (!this.isEnabled) {
    return
  }
  this.element.disabled = true
  this.isEnabled = false
}

PrevNextButton.prototype.update = function() {
  // index of first or last slide, if previous or next
  var slides = this.parent.slides
  // enable is wrapAround and at least 2 slides
  if (this.parent.options.wrapAround && slides.length > 1) {
    this.enable()
    return
  }
  var lastIndex = slides.length ? slides.length - 1 : 0
  var boundIndex = this.isPrevious ? 0 : lastIndex
  var method = this.parent.selectedIndex == boundIndex ? 'disable' : 'enable'
  this[method]()
}

PrevNextButton.prototype.destroy = function() {
  this.deactivate()
}

// --------------------------  -------------------------- //

module.exports = PrevNextButton
PrevNextButton.flickTheBean = Flickity => {
  // -------------------------- Flickity prototype -------------------------- //

  utils.extend(Flickity.defaults, {
    prevNextButtons: true,
    arrowShape: {
      x0: 10,
      x1: 60,
      y1: 50,
      x2: 70,
      y2: 40,
      x3: 30,
    },
  })

  Flickity.createMethods.push('_createPrevNextButtons')
  var proto = Flickity.prototype

  proto._createPrevNextButtons = function() {
    if (!this.options.prevNextButtons) {
      return
    }

    this.prevButton = new PrevNextButton(-1, this)
    this.nextButton = new PrevNextButton(1, this)

    this.on('activate', this.activatePrevNextButtons)
  }

  proto.activatePrevNextButtons = function() {
    this.prevButton.activate()
    this.nextButton.activate()
    this.on('deactivate', this.deactivatePrevNextButtons)
  }

  proto.deactivatePrevNextButtons = function() {
    this.prevButton.deactivate()
    this.nextButton.deactivate()
    this.off('deactivate', this.deactivatePrevNextButtons)
  }

  Flickity.PrevNextButton = PrevNextButton
}