/*	Copyright (c) 2017 Jean-Marc VIGLINO, 
  released under the CeCILL-B license (French BSD license)
  (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
*/

import ol_style_Style from 'ol/style/Style.js'
import ol_style_Stroke from 'ol/style/Stroke.js'
import ol_style_Fill from 'ol/style/Fill.js'
import ol_style_Text from 'ol/style/Text.js'
import {boundingExtent as ol_extent_boundingExtent} from 'ol/extent.js'
import ol_control_CanvasBase from './CanvasBase.js'

/**
 * Draw a grid reference on the map and add an index.
 *
 * @constructor
 * @extends {ol_control_CanvasBase}
 * @fires select
 * @param {Object=} Control options.
 *  @param {ol_style_Style} options.style Style to use for drawing the grid (stroke and text), default black.
 *  @param {number} options.maxResolution max resolution to display the graticule
 *  @param {ol.extent} options.extent extent of the grid, required
 *  @param {ol.size} options.size number of lines and cols, required
 *  @param {number} options.margin margin to display text (in px), default 0px
 *  @param {ol.source.Vector} options.source source to use for the index, default none (use setIndex to reset the index)
 *  @param {string | function} options.property a property to display in the index or a function that takes a feature and return the name to display in the index, default 'name'.
 *  @param {function|undefined} options.sortFeatures sort function to sort 2 features in the index, default sort on property option
 *  @param {function|undefined} options.indexTitle a function that takes a feature and return the title to display in the index, default the first letter of property option
 *  @param {string} options.filterLabel label to display in the search bar, default 'filter'
 */
var ol_control_GridReference = class olcontrolGridReference extends ol_control_CanvasBase {
  constructor(options) {
    options = options || {}

    // Initialize parent
    var elt = document.createElement("div")
    elt.className = (!options.target ? "ol-control " : "") + "ol-gridreference ol-unselectable " + (options.className || "")

    options.style = options.style || new ol_style_Style({
      stroke: new ol_style_Stroke({ color: "#000", width: 1 }),
      text: new ol_style_Text({
        font: "bold 14px Arial",
        stroke: new ol_style_Stroke({ color: "#fff", width: 2 }),
        fill: new ol_style_Fill({ color: "#000" }),
      })
    })

    super({
      element: elt,
      target: options.target,
      style: options.style
    })

    if (typeof (options.property) == 'function'){
      this.getFeatureName = options.property
    }
    if (typeof (options.sortFeatures) == 'function') {
      this.sortFeatures = options.sortFeatures
    }
    if (typeof (options.indexTitle) == 'function') {
      this.indexTitle = options.indexTitle
    }

    // Set index using the source
    this.source_ = options.source
    if (options.source) {
      this.setIndex(options.source.getFeatures(), options)
      // reload on ready
      options.source.once('change', function () {
        if (options.source.getState() === 'ready') {
          this.setIndex(options.source.getFeatures(), options)
        }
      }.bind(this))
    }

    // Options
    this.set('maxResolution', options.maxResolution || Infinity)
    this.set('extent', options.extent)
    this.set('size', options.size)
    this.set('margin', options.margin || 0)
    this.set('property', options.property || 'name')
    this.set('filterLabel', options.filterLabel || 'filter')
  }
  /**
   * Set the map instance the control is associated with.
   * @param {ol_Map} map The map instance.
   */
  setMap(map) {
    super.setMap(map)
    this.setIndex(this.source_.getFeatures())
  }
  /** Returns the text to be displayed in the index
   * @param {ol.Feature} f the feature
   * @return {string} the text to be displayed in the index
   * @api
   */
  getFeatureName(f) {
    return f.get(this.get('property') || 'name')
  }
  /** Sort function
   * @param {ol.Feature} a first feature
   * @param {ol.Feature} b second feature
   * @return {Number} 0 if a==b, -1 if a<b, 1 if a>b
   * @api
   */
  sortFeatures(a, b) {
    return (this.getFeatureName(a) == this.getFeatureName(b)) ? 0 : (this.getFeatureName(a) < this.getFeatureName(b)) ? -1 : 1
  }
  /** Get the feature title
   * @param {ol.Feature} f
   * @return the first letter of the eature name (getFeatureName)
   * @api
   */
  indexTitle(f) {
    return this.getFeatureName(f).charAt(0)
  }
  /** Display features in the index
   * @param { Array<ol.Feature> | ol.Collection<ol.Feature> } features
   */
  setIndex(features) {
    if (!this.getMap())
      return
    var self = this
    if (features.getArray)
      features = features.getArray()
    features.sort(function (a, b) { return self.sortFeatures(a, b) })
    this.element.innerHTML = ""
    var elt = this.element

    var search = document.createElement("input")
    search.setAttribute('type', 'search')
    search.setAttribute('placeholder', this.get('filterLabel') || 'filter')
    var searchKeyupFunction = function () {
      var v = this.value.replace(/^\*/, '')
      // console.log(v)
      var r = new RegExp(v, 'i')
      var list = ul.querySelectorAll('li')
      Array.prototype.forEach.call(list, function (li) {
        if (li.classList.contains('ol-title')) {
          li.style.display = ''
        } else {
          if (r.test(li.querySelector('.ol-name').textContent))
            li.style.display = ''
          else
            li.style.display = 'none'
        }
      })
      Array.prototype.forEach.call(ul.querySelectorAll("li.ol-title"), function (li) {
        var nextVisible
        var start = false
        for (var i = 0; i < list.length; i++) {
          if (start) {
            if (list[i].classList.contains('ol-title'))
              break
            if (!list[i].style.display) {
              nextVisible = list[i]
              break
            }
          }
          if (list[i] === li)
            start = true
        }
        if (nextVisible)
          li.style.display = ''
        else
          li.style.display = 'none'
      })
    }
    search.addEventListener('search', searchKeyupFunction)
    search.addEventListener('keyup', searchKeyupFunction)
    elt.appendChild(search)

    var ul = document.createElement("ul")
    elt.appendChild(ul)
    var r, title
    features.forEach(function (feat) {
      r = this.getReference(feat.getGeometry().getFirstCoordinate())
      if (r) {
        var name = this.getFeatureName(feat)
        var c = this.indexTitle(feat)
        if (c != title) {
          var li_title = document.createElement("li")
          li_title.classList.add('ol-title')
          li_title.textContent = c
          ul.appendChild(li_title)
        }
        title = c
        var li_ref_name = document.createElement("li")
        var span_name = document.createElement("span")
        span_name.classList.add("ol-name")
        span_name.textContent = name
        li_ref_name.appendChild(span_name)
        var span_ref = document.createElement("span")
        span_ref.classList.add("ol-ref")
        span_ref.textContent = r
        li_ref_name.appendChild(span_ref)
        var feature = feat
        li_ref_name.addEventListener("click", function () {
          this.dispatchEvent({ type: "select", feature: feature })
        }.bind(this))

        ul.appendChild(li_ref_name)
      }
    }.bind(this))
  }
  /** Get reference for a coord
  *	@param {ol.coordinate} coords
  *	@return {string} the reference
  */
  getReference(coords) {
    if (!this.getMap())
      return
    var extent = this.get('extent')
    var size = this.get('size')

    var dx = Math.floor((coords[0] - extent[0]) / (extent[2] - extent[0]) * size[0])
    if (dx < 0 || dx >= size[0])
      return ""
    var dy = Math.floor((extent[3] - coords[1]) / (extent[3] - extent[1]) * size[1])
    if (dy < 0 || dy >= size[1])
      return ""
    return this.getHIndex(dx) + this.getVIndex(dy)
  }
  /** Get vertical index (0,1,2,3...)
   * @param {number} index
   * @returns {string}
   * @api
   */
  getVIndex(index) {
    return index
  }
  /** Get horizontal index (A,B,C...)
   * @param {number} index
   * @returns {string}
   * @api
   */
  getHIndex(index) {
    return String.fromCharCode(65 + index)
  }
  /** Draw the grid
  * @param {ol.event} e postcompose event
  * @private
  */
  _draw(e) {
    if (this.get('maxResolution') < e.frameState.viewState.resolution)
      return

    var ctx = this.getContext(e)
    var canvas = ctx.canvas
    var ratio = e.frameState.pixelRatio

    var w = canvas.width / ratio
    var h = canvas.height / ratio

    var extent = this.get('extent')
    var size = this.get('size')

    var map = this.getMap()
    var ex = ol_extent_boundingExtent([map.getPixelFromCoordinate([extent[0], extent[1]]), map.getPixelFromCoordinate([extent[2], extent[3]])])
    var p0 = [ex[0], ex[1]]
    var p1 = [ex[2], ex[3]]
    var dx = (p1[0] - p0[0]) / size[0]
    var dy = (p1[1] - p0[1]) / size[1]

    ctx.save()
    var margin = this.get('margin')
    ctx.scale(ratio, ratio)

    ctx.strokeStyle = this.getStroke().getColor()
    ctx.lineWidth = this.getStroke().getWidth()

    // Draw grid
    ctx.beginPath()
    var i
    for (i = 0; i <= size[0]; i++) {
      ctx.moveTo(p0[0] + i * dx, p0[1])
      ctx.lineTo(p0[0] + i * dx, p1[1])
    }
    for (i = 0; i <= size[1]; i++) {
      ctx.moveTo(p0[0], p0[1] + i * dy)
      ctx.lineTo(p1[0], p0[1] + i * dy)
    }
    ctx.stroke()

    // Draw text
    ctx.font = this.getTextFont()
    ctx.fillStyle = this.getTextFill().getColor()
    ctx.strokeStyle = this.getTextStroke().getColor()
    var lw = ctx.lineWidth = this.getTextStroke().getWidth()
    var spacing = margin + lw
    ctx.textAlign = 'center'
    var letter, x, y
    for (i = 0; i < size[0]; i++) {
      letter = this.getHIndex(i)
      x = p0[0] + i * dx + dx / 2
      y = p0[1] - spacing
      if (y < 0) {
        y = spacing
        ctx.textBaseline = 'hanging'
      }
      else
        ctx.textBaseline = 'alphabetic'
      ctx.strokeText(letter, x, y)
      ctx.fillText(letter, x, y)
      y = p1[1] + spacing
      if (y > h) {
        y = h - spacing
        ctx.textBaseline = 'alphabetic'
      }
      else
        ctx.textBaseline = 'hanging'
      ctx.strokeText(letter, x, y)
      ctx.fillText(letter, x, y)
    }
    ctx.textBaseline = 'middle'
    for (i = 0; i < size[1]; i++) {
      letter = this.getVIndex(i)
      y = p0[1] + i * dy + dy / 2
      ctx.textAlign = 'right'
      x = p0[0] - spacing
      if (x < 0) {
        x = spacing
        ctx.textAlign = 'left'
      }
      else
        ctx.textAlign = 'right'
      ctx.strokeText(letter, x, y)
      ctx.fillText(letter, x, y)
      x = p1[0] + spacing
      if (x > w) {
        x = w - spacing
        ctx.textAlign = 'right'
      }
      else
        ctx.textAlign = 'left'
      ctx.strokeText(letter, x, y)
      ctx.fillText(letter, x, y)
    }

    ctx.restore()
  }
}

export default ol_control_GridReference