import L from 'leaflet'
import './leaflet.bezier'

function getCitations(dataset) {
  console.log(dataset.citations)
  return dataset.citations.map(c => ({
    title: c[0],
    location: c[2],
    lat: c[5],
    lng: c[6],
    type: c[7],
  }))
}

const arcStyle = {
  color: 'rgb(245, 246, 150)',
  fillColor: 'rgb(245, 246, 150)',
  opacity: 0.8,
  weight: '1',
}

const redDot = L.icon({
  iconUrl: '/assets/img/reddot.png',
  iconSize: [17, 17], // size of the icon
  iconAnchor: [8, 8], // point of the icon which will correspond to marker's location
  popupAnchor: [0, -5] // point from which the popup should open relative to the iconAnchor
})

function addMarker(map, latlng, title, subtext) {
  const marker = L.marker(latlng, { icon: redDot }).addTo(map)
  marker.bindPopup([
    "<b>", title, "</b>",
    "<br>",
    subtext,
  ].join(''))
}
function addArc(map, src, dest) {
  L.bezier({
    path: [
      [
        { lat: src[0], lng: src[1] },
        { lat: dest[0], lng: dest[1] },
      ],
    ]
  }, arcStyle).addTo(map)
}

export default function append(el, payload) {
  const { cmd, data } = payload
  const citations = getCitations(data)

  // console.log(el)
  let map = L.map(el).setView([25, 0], 2)
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.dark',
    style: 'mapbox://styles/mapbox/dark-v9',
    accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg'
  }).addTo(map)

  let { address } = data
  console.log(address)
  let source = [0, 0]
  if (address) {
    source = address.slice(3, 5).map(n => parseFloat(n))
    // console.log(map, address, source)
    console.log(source)
  }

  citations.forEach(point => {
    const latlng = [point.lat, point.lng]
    if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
    addMarker(map, latlng, point.title, point.location)
    addArc(map, source, latlng)
  })

  addMarker(map, source, document.querySelector('h2').innerText, address[0])
}