{% extends 'localcosmos_server/modals/large_modal_form.html' %}
{% load i18n localcosmos_tags %}

{% block title %}
	{% trans 'Manage polygon' %}
{% endblock %}


{% block action %}
    {% if geography_polygon %}
        {% url 'geography:edit_polygon' app.uid category.id geography_polygon.id %}
    {% else %}
        {% url 'geography:add_polygon' app.uid category.id %}
    {% endif %}
{% endblock %}

{% block body %}
	<div id="polygon-map" style="width: 100%; height: 600px;"></div>

	{% render_bootstrap_form form %}

	<div id="polygon-error" class="mt-3 d-none">
		<div class="alert alert-danger">
			{% trans 'Your polygon had too many nodes. The maximum is 40 nodes.' %}
		</div>
	</div>

{% endblock %}

{% block footer %}
	{% include 'localcosmos_server/modals/footers/save_close.html' %}
{% endblock %}

{% block script %}
	{% if success %}
		{% include 'geography/snippets/reload_category_list.html' %}
	{% endif %}
	<script>
		(function(){

			const Map = ol.Map;
			const TileLayer = ol.layer.Tile;
			const OSM = ol.source.OSM;
			const View = ol.View;
			const VectorSource = ol.source.Vector;
			const VectorLayer = ol.layer.Vector;
			const fromLonLat = ol.proj.fromLonLat;
			const Modify = ol.interaction.Modify;
			const Draw = ol.interaction.Draw;
			const Snap = ol.interaction.Snap;
			const Select = ol.interaction.Select;
			const defaultInteractions = ol.interaction.defaults.defaults;
			const Control = ol.control.Control;
			const defaultControls = ol.control.defaults.defaults;
			const GeoJSON = ol.format.GeoJSON;

			const polygon_form_field = document.getElementById("id_polygon");

			const max_nodes = 41;
			const error_box = document.getElementById("polygon-error");

			let initial_longitude = 30,
				initial_latitude = 30,
				initial_zoom = 3;

			function updateFormField(event){

				const geojsonWriter = new ol.format.GeoJSON();

				let feature = null;

				if (event.hasOwnProperty('feature')){
					feature = event.feature;
				}
				else if (event.hasOwnProperty('features')){
					event.features.forEach(f => {
						feature = f;
					});
				}

				if (feature != null){
					// FeatureCollection
					const geojsonStr = geojsonWriter.writeFeatures([feature], { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'});
					polygon_form_field.value = geojsonStr;
					error_box.classList.add("d-none");
				}
				else {
					error_box.classList.remove("d-none");
				}
			}

			setTimeout(function(){

				const polygonStyle = {
					'fill-color': 'rgba(255, 0, 0, 0.3)',
					'stroke-color': '#ff0000',
					'stroke-width': 3,
				};

				const raster = new TileLayer({
					source: new OSM({
						// Ensure OSM tile requests include a valid referrer header.
						tileLoadFunction: function(tile, src) {
							const image = tile.getImage();
							image.referrerPolicy = 'strict-origin-when-cross-origin';
							image.src = src;
						}
					}),
				});

				const source = new VectorSource(
					{% if geojson_geometry_4326 %}
						{
							features: new GeoJSON().readFeatures({{ geojson_geometry_4326|safe }}, {
								dataProjection: 'EPSG:4326',
								featureProjection: 'EPSG:3857'
							}),
						}
					{% endif %}
				);

				const vector = new VectorLayer({
					source: source,
					style: polygonStyle,
				});

				
				const select = new Select();


				// custom controls
				class ClearVectorLayerControl extends Control {
					/**
					 * @param {Object} [opt_options] Control options.
					 */
					constructor(opt_options) {
						const options = opt_options || {};

						const clearButton = document.createElement('a');
						clearButton.className = 'project-area-clear-btn';
						clearButton.textContent = 'Clear';

						const drawButton = document.createElement('a');
						drawButton.className = 'project-area-draw-btn';
						drawButton.textContent = 'Draw';

						const element = document.createElement('div');
						element.className = 'project-area-controls ol-unselectable';
						element.appendChild(drawButton);
						element.appendChild(clearButton);

						super({
							element: element,
							target: options.target,
						});

						clearButton.addEventListener('click', this.clearVectorLayer.bind(this), false);

						drawButton.addEventListener('click', this.drawPolygon.bind(this), false);
					}

					clearVectorLayer() {
						this.getMap().getAllLayers()[1].getSource().clear();
						polygon_form_field.value = '';
					}

					drawPolygon() {
						this.getMap().addInteraction(draw);
					}
				}

				// Limit multi-world panning to one world east and west of the real world.
				// Geometry coordinates have to be within that range.
				const extent = ol.proj.get('EPSG:3857').getExtent().slice();
				extent[0] += extent[0];
				extent[2] += extent[2];

				const modify = new Modify({
					features: select.getFeatures(),
					source: source
				});

				modify.on('modifyend', updateFormField);

				const map = new Map({
					controls: defaultControls().extend([new ClearVectorLayerControl()]),
					layers: [raster, vector],
					target: 'polygon-map',
					view: new View({
						center: fromLonLat([initial_longitude, initial_latitude]),
						zoom: initial_zoom,
						extent,
					}),
				});

				let snap;

				const draw = new Draw({
					source: source,
					type: 'Polygon',
				});

				draw.on('drawstart', function(event){
					vector.getSource().clear();
				});

				draw.on('drawend', function(event) {
					map.removeInteraction(draw);
					updateFormField(event);
				});

				//map.addInteraction(draw);
				snap = new Snap({source: source});
				map.addInteraction(snap);

				map.addInteraction(modify);
				map.addInteraction(select);
				

			}, 500);
		})();
	</script>
{% endblock %}