import L from 'leaflet'
// import Snap from './snap.svg-min'

function build() {
  let map = L.map('mapid').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 points = read_json('citations')
  let address = read_json('address')
  let source = [0, 0]
  if (address) {
    source = address.slice(3, 5).map(n => parseFloat(n))
    console.log(address, source)
  }

  let redDot = L.icon({
    iconUrl: '../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
  })

  points.forEach(point => {
    const latlng = point.slice(5, 7).map(n => parseFloat(n))
    if (!latlng.length || isNaN(latlng[0]) || isNaN(latlng[1])) return
    const marker = L.marker(latlng, { icon: redDot }).addTo(map)
    marker.bindPopup([
      "<b>", point[0], "</b>",
      "<br>",
      point[1],
    ].join(''))
    // var arcStyle = {
    //   color: 'rgb(245, 246, 150)',
    //   fillColor: 'rgb(245, 246, 150)',
    //   opacity: 0.8,
    //   weight: '1',
    //   vertices: 100,
    // }
    // L.Polyline.Arc(source, latlng, arcStyle).addTo(map);
    // console.log(latlng)
    const pathStyle = {
      color: 'rgb(245, 246, 150)',
      fillColor: 'rgb(245, 246, 150)',
      opacity: 0.8,
      weight: '1',
    }
    L.bezier({
      path: [
        [
            { lat: source[0], lng: source[1] },
            { lat: latlng[0], lng: latlng[1] },
        ],
      ]
    }, pathStyle).addTo(map)
  })

  var marker = L.marker(source, { icon: redDot }).addTo(map);
  marker.bindPopup([
    "<b>", document.querySelector('h2').innerText, "</b>",
    '<br/>',
    address[0]
  ].join(''))

}

export default build