/* globals $, jQuery, L */
var RapportoMarker = L.Circle.extend({ options: { originalData: 0 } })

function viewMap () {
  var map = L.map('mapid').setView([43.797, 11.2400], 11)
  // Set up the OSM layer
  L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  ).addTo(map)
  $.getJSON('/api/rapporti/get' + (new URL(document.URL).search), function (data) {
    for (var i in data.rapporti) {
      var p = data.rapporti[i]
      var marker = new RapportoMarker([p.lat, p.lng], {
        color: p.colore,
        fillColor: p.colore,
        fillOpacity: 0.3,
        radius: p.radius,
        originalData: p
      })
      marker.addTo(map).bindPopup(p.explaination)
      marker.off('click')
      marker.on('click', onMarkerClicked)
    }
  })
  function onMarkerClicked (evt) {
    console.log('T', this)
    var data = evt.target.options.originalData
    var rid = data.id
    $('#dialog').html('<div class="explaination"></div><div class="actions"></div>')
    $('#dialog .explaination').text(data.explaination)
    $('#dialog .actions').append($('<a href="#">Modifica</a>').attr('href', '/api/rapporti/' + rid + '/edit'))
    $('#dialog').attr('title', rid)
    $('#dialog').data('rid', rid)
    $('#dialog').data('marker', this)
    $('#dialog').dialog({
      modal: true,
      beforeClose: function (event, ui) {
        $('#dialog').dialog('destroy')
        $('#dialog')[0].outerHTML = '<div id="dialog"></div>'
      }
    })
  }

    $('body').on('click', '.btn-elimina', function onCancella (evt) {
        var rid = $('#dialog').data('rid')
        console.log('cancelliamo?', rid)
        $.post('/api/rapporti/delete', { rid: rid }, function () {
            map.removeLayer($('#dialog').data('marker'))
            $('#dialog').dialog('close')
        })
    })
}
jQuery(function ($) {
    var dateFormat = "yy-mm-dd";
    $('.btn').button()
    function getDate( element ) {
        var date;
        try {
            date = $.datepicker.parseDate( dateFormat, element.value )
        } catch( error ) {
            date = null
        }

        return date
    }
  $('#mapid').css('height', $(window).height() - 200)
    var from=$('input[name=created__gt]').datepicker({defaultDate: "-1month",
        changeMonth: true, numberOfMonths: 1,
        dateFormat: dateFormat
    }
    ).on("change", function() {
        to.datepicker("option", "minDate", getDate(this));
    })
    var to = $('input[name=created__lt]').datepicker({
        defaultDate: "+1d", changeMonth: true, numberOfMonths: 1,
        dateFormat: dateFormat
    }
    ).on("change", function() {
        from.datepicker("option", "maxDate", getDate(this))
    })
    $('#filters').dialog({autoOpen: false, modal: true, height: 'auto', width: $(window).width() - 200})
    $('#btn-open-filter').click(function() {
    $('#filters').dialog('open')
    })
  viewMap()
})