<?php

use Fisharebest\Webtrees\I18N;
use Fisharebest\Webtrees\View;

?>

<div class="py-4">
    <div class="row osm-wrapper">
        <div id="osm-map" class="col-sm-9 wt-ajax-load osm-user-map" dir="ltr"></div>
        <ul class="col-sm-3 osm-sidebar list-unstyled"></ul>
    </div>
</div>

<?php View::push('styles') ?>
<style>
    .osm-wrapper, .osm-user-map {
        height: 75vh
    }

    .osm-sidebar {
        height: 100%;
        overflow-y: auto;
        padding: 0;
        margin: 0;
        border: 0;
        display: none;
        font-size: small;
    }

    .osm-sidebar .gchart {
        margin: 1px;
        padding: 2px
    }

    .unmapped {
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%, auto;
    }

    .flag {
        border: 1px solid grey !important;
        height: 15px;
        width: 25px;
    }
</style>
<?php View::endpush() ?>

<?php View::push('javascript') ?>
<script type="application/javascript">
    "use strict";

    window.WT_OSM = (function () {
        let baseData = {
            minZoom: 2,
            providerName: "OpenStreetMap.Mapnik",
            providerOptions: [],
        };

        let map     = null;
        let zoom    = null;
        let markers = L.markerClusterGroup({
            showCoverageOnHover: false,
        });

        let resetControl = L.Control.extend({
            options: {
                position: "topleft",
            },

            onAdd: function (map) {
                let container = L.DomUtil.create("div", "leaflet-bar leaflet-control leaflet-control-custom");
                container.onclick = function () {
                    if (zoom) {
                        map.flyTo(markers.getBounds().getCenter(), zoom);
                    } else {
                        map.flyToBounds(markers.getBounds().pad(0.2));
                    }
                    let sidebar = $(".osm-sidebar");
                    sidebar.scrollTo(sidebar.children(":first"));

                    return false;
                };
                let anchor = L.DomUtil.create("a", "leaflet-control-reset", container);
                let reset = <?= json_encode(I18N::translate('Reset to initial map state')) ?>;
                anchor.href = "#";
                anchor.title = reset;
                anchor.role = "button";
                $(anchor).attr("aria-label", "reset");
                let image = L.DomUtil.create("i", "fas fa-redo", anchor);
                image.alt = reset;

                return container;
            },
        });

        let _drawMap = function () {
            map = L.map("osm-map", {
                center: [0, 0],
                minZoom: baseData.minZoom, // maxZoom set by leaflet-providers.js
                zoomControl: false, // remove default
            });
            L.tileLayer.provider(baseData.providerName, baseData.providerOptions).addTo(map);
            L.control.zoom({ // Add zoom with localised text
                zoomInTitle: <?= json_encode(I18N::translate('Zoom in')) ?>,
                zoomOutTitle: <?= json_encode(I18N::translate('Zoom out')) ?>,
            }).addTo(map);
        };

        let _addLayer = function () {
            let geoJsonLayer;
            let domObj = ".osm-sidebar";
            let sidebar = <?= json_encode($data['sidebar']) ?>;
            let data = <?= json_encode($data['markers']) ?>;

            if (data.features.length === 1) {
                zoom = data.features[0].properties.zoom;
            }
            geoJsonLayer = L.geoJson(data, {
                pointToLayer: function (feature, latlng) {
                    return new L.Marker(latlng, {
                        icon:  L.BeautifyIcon.icon({
                            icon: feature.properties.icon["name"],
                            borderColor: "transparent",
                            backgroundColor: feature.properties.icon["color"],
                            iconShape: "marker",
                            textColor: "white",
                        }),
                        title: feature.properties.tooltip,
                        alt: feature.properties.tooltip,
                        id: feature.id,
                    })
                        .on("popupopen", function (e) {
                            let sidebar = $(".osm-sidebar");
                            let item = sidebar.children(".mapped[data-id=" + e.target.feature.id + "]");
                            item.addClass("messagebox");
                            sidebar.scrollTo(item);
                        })
                        .on("popupclose", function () {
                            $(".osm-sidebar").children(".mapped")
                                .removeClass("messagebox");
                        });
                },
                onEachFeature: function (feature, layer) {
                    layer.bindPopup(feature.properties.popup);
                },
            });

            if (data.features.length > 0) {
                markers.addLayer(geoJsonLayer);
                map
                    .addControl(new resetControl())
                    .addLayer(markers)
                    .fitBounds(markers.getBounds().pad(0.2));
                if (zoom) {
                    map.setView(markers.getBounds().getCenter(), zoom);
                }
            } else {
                map.fitWorld();
                  $(domObj).append("<div class=\"bg-info text-white\">" + <?= json_encode(I18N::translate('No mappable items')) ?> + "</div>");
            }
            if (sidebar === "") {
                sidebar = "<div class='bg-info text-white'>" + <?= json_encode(I18N::translate('No mappable items')) ?>+ "</div>"
            }
            $(domObj)
                .append(sidebar)
                .slideDown(300);
        };

        /**
         *
         * @param elem
         * @returns {$}
         */

        $.fn.scrollTo = function (elem) {
            let _this = $(this);
            _this.animate({
                scrollTop: elem.offset().top - _this.offset().top + _this.scrollTop(),
            });
            return this;
        };

        /**
         * @private
         */
        let _initialize = function () {
            // Activate marker popup when sidebar entry clicked
            $(function () {
                $(".osm-sidebar")
                // open marker popup if sidebar event is clicked
                    .on("click", ".mapped", function (e) {
                        // first close any existing
                        map.closePopup();
                        let eventId = $(this).data("id");
                        //find the marker corresponding to the clicked event
                        let mkrLayer = markers.getLayers().filter(function (v) {
                            return typeof (v.feature) !== "undefined" && v.feature.id === eventId;
                        });
                        let mkr = mkrLayer.pop();
                        // Unfortunately zoomToShowLayer zooms to maxZoom
                        // when all marker in a cluster have exactly the
                        // same co-ordinates
                        markers.zoomToShowLayer(mkr, function (e) {
                            mkr.openPopup();
                        });
                        return false;
                    })
                    .on("click", "a", function (e) { // stop click on a person also opening the popup
                        e.stopPropagation();
                    });
            });

            _drawMap();
            _addLayer();
        };

        return {
            drawMap: function () {
                _initialize();
            },
        };
    })();

    WT_OSM.drawMap();
</script>
<?php View::endpush() ?>
