{% extends "base.html" %}
{% load custom_tags_and_filters %}
{% block extrahead %}
    {% load static %}
    <script type="text/javascript" src="{% static "floor_plan/floor_plan_canvas.js" %}"></script>
    <script type="text/javascript" src="{% static "floor_plan/hammer.min.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "floor_plan/floor_plan_canvas.css" %}" />
    <style>
		html {
			height: 100%;
		}
		body {
			height: 100%;
			visibility: hidden;
		}
		.is-invalid {
			border-color: #dc3545;
			background-color: #fff1f3;
		}
		.invalid-feedback {
			color: #dc3545;
		}
	
    </style>
{% endblock %}
{% block title %}Floor Plan Editor{% endblock %}
{% block body %}
    <div id="editor"
         style="height: 100%;
                padding: 10px;
                display: grid;
                grid-template-columns: minmax(min-content, 3fr) 8fr;
                gap: 5px">
        <div class="well" style="height: 100%;">
            {% url 'floor_plan' loaded_floor_plan.id as view_url %}
            {% button size="small" type="view" value="Go to view" url=view_url %}
            <div id="marker-edit-container" style="margin-top: 10px;"></div>
        </div>
        <div id="canvas-overlay" class="canvas-overlay" style="height: 100%;">
            <div class="canvas-container" id="canvas-container">
                <div class="canvas-header">
                    <div class="canvas-buttons">
                        <button class="canvas-btn" id="zoom-in">+</button>
                        <button class="canvas-btn" id="zoom-out">-</button>
                    </div>
                    <div>
                        <span class="canvas-title">{{ loaded_floor_plan.name }}</span>
                        <span class="canvas-hint-text"><i class="glyphicon glyphicon-info-sign"></i> Right click on floor plan to create a new marker, or left click to select a marker</span>
                        <span class="canvas-hint-text"><i class="glyphicon glyphicon-info-sign"></i> Click and drag to move</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="templates" style="display: none;">
        <div id="floor-plan-edit-template">
            <form method="post" enctype="multipart/form-data">
                <div style="display: flex; justify-content: space-between">
                    <h4>Edit Floor Plan</h4>
                    <div style="display: flex; align-items: center; justify-content: center; gap: 5px;">
                        <button id="floor-plan-reset-button" class="btn btn-sm btn-warning">Reset</button>
                        {% button size="small" type="save" value="Save" name="save_floor_plan" %}
                    </div>
                </div>
                {% csrf_token %}
                <div class="form-group">
                    <label class="control-label" for="name">Name</label>
                    <input class="form-control" type="text" id="name" name="name">
                </div>
                <div class="form-group">
                    <label class="control-label" for="image">Floor Plan Image</label>
                    <input type="file" id="image" name="image" accept=".jpg, .jpeg, .png" />
                </div>
                <div class="form-group">
                    <input type="checkbox" name="is_default" id="is_default">
                    <label class="control-label" for="is_default">Default Floor Plan</label>
                </div>
            </form>
        </div>
        <div id="marker-edit-template">
            <form method="post">
                {% csrf_token %}
                <div style="display: flex; justify-content: space-between">
                    <h4>Edit Marker</h4>
                    <div style="display: flex; align-items: center; justify-content: center; gap: 5px;">
                        {% button size="small" type="delete" submit=True  value="Delete" name="delete_node" onclick="return confirm('Are you sure you delete this marker?');" %}
                        <button id="marker-reset-button" class="btn btn-sm btn-warning">Cancel</button>
                        {% button size="small" type="save" value="Save" name="save_node" %}
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="type">Marker Type</label>
                    <select id="type" name="type" class="form-control">
                        {% for type_id, type_name in types %}
                            <option value="{{ type_id }}" data-name="{{ type_name }}">{{ type_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="control-label" for="icon">Icon</label>
                    <select id="icon" name="icon" class="form-control">
                        {% for icon in icons %}
                            <option value="{{ icon.id }}" data-img="{{ icon.image.url }}">{{ icon.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="control-label" for="icon_scale">Icon Scale</label>
                    <input class="form-control" type="range" id="icon_scale" name="icon_scale" min="0.1" max="2" step="0.05" />
                </div>
                <div class="form-group">
                    <label class="control-label" for="x_offset">Icon X Offset (Horizontal)</label>
                    <input class="form-control" type="range" id="x_offset" name="x_offset" step="1" min="0" />
                </div>
                <div class="form-group">
                    <label class="control-label" for="y_offset">Icon Y Offset (Vertical)</label>
                    <input class="form-control" type="range" id="y_offset" name="y_offset" step="1" min="0" />
                </div>
                <input type="hidden" id="id" name="id" readonly>
                <input type="hidden" id="floor_plan" name="floor_plan" value="{{ floor_plan_id }}" readonly>
                <input type="hidden" id="x" name="x" readonly>
                <input type="hidden" id="y" name="y" readonly>
                <div id="marker-edit-type"></div>
            </form>
        </div>
        <div id="sensors-select-template">
            <div class="form-group">
                <label class="control-label" for="sensor">Sensor</label>
                <select id="sensor" name="sensor" class="form-control">
                    {% for sensor in sensors %}
                        <option value="{{ sensor.id }}" data-name="{{ sensor.name }}">{{ sensor.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div id="floor-plans-select-template">
            <div class="form-group">
                <label class="control-label" for="portal_to">Portal To Floor Plan</label>
                <select id="portal_to" name="portal_to" class="form-control">
                    {% for floor_plan in floor_plans %}
                        <option value="{{ floor_plan.id }}" data-name="{{ floor_plan.name }}">{{ floor_plan.name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>
    {#	Markers List as JSON #}
    {{ node_list|json_script:"marker-list-data" }}
    <script type="text/javascript">
		const markers = JSON.parse(document.getElementById('marker-list-data').textContent);
		const container = document.getElementById('canvas-container');
        let selected_marker = undefined;
        let selected_marker_is_new = false;
        let selected_marker_index = undefined;

		const fp = new FloorPlanCanvas(
            container,
			{
				img_url: "{{ loaded_floor_plan.image.url }}",
				markers,
				show_sensor_value: false,
				show_sensor_alert: false,
				marker_on_click: function(node, e) {
					if(node) {
						select_marker(node, -1, false);
					}
				},
				marker_on_dbl_click: function(node, e) {
				},
				marker_on_hover: function(node, e) {
				},
				on_zoom: function() {
				},
				on_drag: function() {
				},
				on_right_click: function(node, location, e) {
					if(!node && location && !selected_marker) {
						const marker = {
							x: location.x / fp.image_size().width,
							y: location.y / fp.image_size().height,
						};
						markers.push(marker);
						select_marker(marker, markers.length - 1, true);
					}
				}
            }
		);
		fp.set_cursor('crosshair');

        function select_marker(marker, index, is_new=false)
		{
            fp.set_cursor('grab');
            // If a marker is already selected, deselect it
            if(selected_marker) {
				selected_marker.selected = false;
                selected_marker.img_reload = true;
				Object.assign(selected_marker, JSON.parse(selected_marker.previous));
			}

            // Select the new marker
            selected_marker = marker;
            selected_marker_index = index;
            selected_marker_is_new = is_new;

            // Save the marker's previous state
            marker.previous = JSON.stringify(marker);
            marker.selected = true;

            // Show the marker edit form
            show_marker_edit_form(marker, {});
		}
        
        function show_marker_edit_form(marker, form_issues)
		{
			const marker_edit_instance = $('#marker-edit-template').clone();
            marker_edit_instance.attr('id', 'marker-edit-instance');
			$('#marker-edit-container').empty().append(marker_edit_instance);
            marker_edit_instance.show();

			// Marker type field
            marker_edit_instance.find('#type').on('change', function() {
				marker.type_id = parseInt($(this).val());
				marker.type = $(this).find(':selected').data('name');
				if(marker.type === "Sensor") {
                	set_node_type_sensor(marker, marker_edit_instance);
                    display_issues(form_issues, marker_edit_instance, 'sensor');
            	} else if(marker.type === "Portal") {
					set_node_type_portal(marker, marker_edit_instance);
                    display_issues(form_issues, marker_edit_instance, 'portal_to');
				}
            });
            marker_edit_instance.find('#type')
				.val(marker.type_id)
				.trigger('change');
			display_issues(form_issues, marker_edit_instance, 'type');

			// Marker Icon field
			marker_edit_instance.find('#icon').val(marker.icon_id);
			marker_edit_instance.find('#icon').on('change', function() {
				marker.icon_id = parseInt($(this).val());
				marker.icon = $(this).find(':selected').data('img');
                marker.img_reload = true;
			});
            display_issues(form_issues, marker_edit_instance, 'icon');

            // X Offset field
			marker_edit_instance.find('#x_offset').attr('max', fp.image_size().width);
			marker_edit_instance.find('#x_offset').val(marker.x * fp.image_size().width);
            marker_edit_instance.find('#x_offset').on('input', function() {
				marker.x = parseFloat($(this).val()) / fp.image_size().width;
                marker_edit_instance.find('#x').val(marker.x);
            });

			// Y Offset field
            marker_edit_instance.find('#y_offset').attr('max', fp.image_size().height);
			marker_edit_instance.find('#y_offset').val(marker.y * fp.image_size().height);
			marker_edit_instance.find('#y_offset').on('input', function() {
				marker.y = parseFloat($(this).val()) / fp.image_size().height;
                marker_edit_instance.find('#y').val(marker.y);
			});

			// Marker Icon Scale field
			marker_edit_instance.find('#icon_scale').val(marker.icon_scale);
            marker_edit_instance.find('#icon_scale').on('input', function() {
				marker.icon_scale = parseFloat($(this).val());
			});
            display_issues(form_issues, marker_edit_instance, 'icon_scale');

            // Marker X field
			marker_edit_instance.find('#x').val(marker.x);

            // Marker Y field
			marker_edit_instance.find('#y').val(marker.y);

            // Marker Id field
			marker_edit_instance.find('#id').val(marker.id);

            // Marker Reset button
			marker_edit_instance.find('#marker-reset-button').on('click', function() {
				cancel();
                return false;
            });
		}

        function display_issues(form_issues, form_instance, id)
		{
			if(form_issues[id]) {
				form_instance.find(`#${id}`).addClass('is-invalid');
                form_instance.find(`#${id}`).after(`<div id="${id}-feedback" class="invalid-feedback">${form_issues[id]}</div>`);
            }
        }

        function set_node_type_sensor(marker, edit_template)
		{
			const sensors_select_instance = $('#sensors-select-template').clone();
            sensors_select_instance.attr('id', 'sensors-select-instance');
			edit_template.find('#marker-edit-type').empty().append(sensors_select_instance);
			sensors_select_instance.show();
			edit_template.find('#sensor').val(marker.sensor_id);
			edit_template.find('#sensor').on('change', function() {
				marker.sensor_id = parseInt($(this).val());
				marker.sensor_name = $(this).find(':selected').data('name');
			});
		}

        function set_node_type_portal(marker, edit_template)
		{
			const floor_plans_select_instance = $('#floor-plans-select-template').clone();
            floor_plans_select_instance.attr('id', 'floor-plans-select-instance');
			edit_template.find('#marker-edit-type').empty().append(floor_plans_select_instance);
			floor_plans_select_instance.show();
			edit_template.find('#portal_to').val(marker.portal_id);
			edit_template.find('#portal_to').on('change', function() {
				marker.portal_id = parseInt($(this).val());
				marker.portal_name = $(this).find(':selected').data('name');
			});
		}

        function cancel()
		{
            if(selected_marker) {
                fp.set_cursor('crosshair');
				selected_marker.selected = false;
				selected_marker.img_reload = true;
				Object.assign(selected_marker, JSON.parse(selected_marker.previous));
				selected_marker = undefined;
                if(selected_marker_is_new) {
					markers.splice(selected_marker_index, 1);
                }
                selected_marker_index = undefined;
                selected_marker_is_new = false;
				show_floor_plan_edit_form_initial();
			}
		}

        function show_floor_plan_edit_form_initial() {
			show_floor_plan_edit_form({}, {});
			reset_floor_plan_form($('#floor-plan-edit-instance'));
        }

        function show_floor_plan_edit_form(value, issues)
		{
			const floor_plan_edit_instance = $('#floor-plan-edit-template').clone();
            floor_plan_edit_instance.attr('id', 'floor-plan-edit-instance');
			$('#marker-edit-container').empty().append(floor_plan_edit_instance);
			floor_plan_edit_instance.show();

			floor_plan_edit_instance.find('#name').val(value['name']);
            display_issues(issues, floor_plan_edit_instance, 'name');

			floor_plan_edit_instance.find('#image').on('change', function(event) {
				const file = event.target.files[0];
				if (file) {
					const reader = new FileReader();
					reader.onload = function(e) {
						const img = new Image();
						img.onload = function() {
							fp.set_img(img);
						}
						img.src = e.target.result;
					}
					reader.readAsDataURL(file);
				}
            });
            display_issues(issues, floor_plan_edit_instance, 'image');

			floor_plan_edit_instance.find('#is_default').prop('checked', value['is_default']);
            display_issues(issues, floor_plan_edit_instance, 'is_default');

			floor_plan_edit_instance.find('#floor-plan-reset-button').on('click', function() {
				reset_floor_plan_form(floor_plan_edit_instance);
                return false;
			});
        }

        function reset_floor_plan_form(floor_plan_edit_instance)
		{
            floor_plan_edit_instance.find('#name').val('{{ loaded_floor_plan.name }}');
            floor_plan_edit_instance.find('#name-feedback').remove();
            floor_plan_edit_instance.find('#name').removeClass('is-invalid');
            if(floor_plan_edit_instance.find('#image').val()) {
				floor_plan_edit_instance.find('#image').val('');
				const img = new Image();
				img.onload = function() {
					fp.set_img(img);
				};
				img.src = '{{ loaded_floor_plan.image.url }}';
			}
            floor_plan_edit_instance.find('#image-feedback').remove();
            floor_plan_edit_instance.find('#image').removeClass('is-invalid');

            {% if loaded_floor_plan.is_default %}
				floor_plan_edit_instance.find('#is_default').prop('checked', true);
			{% else %}
				floor_plan_edit_instance.find('#is_default').prop('checked', false);
			{% endif %}
			floor_plan_edit_instance.find('#is_default-feedback').remove();
			floor_plan_edit_instance.find('#is_default').removeClass('is-invalid');
        }

        function load_state() {
            {% if floor_plan_form %}
				const form_issues = {};
                const value = {};
                {% if floor_plan_form.name %}
					value['name'] = '{{ floor_plan_form.name.value }}';
					form_issues['name'] = '{{ floor_plan_form.errors.name|striptags }}';
				{% endif %}
				{% if floor_plan_form.image %}
					form_issues['image'] = '{{ floor_plan_form.errors.image|striptags }}';
				{% endif %}
				{% if floor_plan_form.is_default %}
					value['is_default'] = {{ floor_plan_form.is_default.value|yesno:"true,false" }};
					form_issues['is_default'] = '{{ floor_plan_form.errors.is_default|striptags }}';
				{% endif %}
				show_floor_plan_edit_form(value, form_issues);
            {% elif node_form %}
				const selected_marker_id = parseInt('{{ selected_node_id }}');
				const marker = selected_marker_id ? markers.find(marker => marker.id === selected_marker_id) : {};
				if(marker) {
					marker.previous = JSON.stringify(marker);
					marker.selected = true;
					const form_issues = {};
					{% if node_form.non_field_errors  %}
						form_issues['non_field_errors'] = $('{{ node_form.non_field_errors }}');
					{% endif %}
					{% if node_form.type %}
						marker.type_id = parseInt('{{ node_form.type.value }}');
						form_issues['type'] = '{{ node_form.errors.type|striptags }}';
					{% endif %}
					{% if node_form.icon %}
						marker.icon_id = parseInt('{{ node_form.icon.value }}');
						form_issues['icon'] = '{{ node_form.errors.icon|striptags }}';
					{% endif %}
					{% if node_form.icon_scale %}
						marker.icon_scale = parseFloat('{{ node_form.icon_scale.value }}');
						form_issues['icon_scale'] = '{{ node_form.errors.icon_scale|striptags }}';
					{% endif %}
					{% if node_form.sensor %}
						marker.sensor_id = parseInt('{{ node_form.sensor.id }}');
						marker.sensor_name = '{{ node_form.sensor.name }}';
						form_issues['sensor'] = '{{ node_form.errors.sensor|striptags }}';
					{% endif %}
					{% if node_form.portal_to %}
						marker.portal_id = parseInt('{{ node_form.portal_to.id }}');
						marker.portal_name = '{{ node_form.portal_to.name }}';
						form_issues['portal_to'] = '{{ node_form.errors.portal_to|striptags }}';
					{% endif %}
					{% if node_form.x %}
						marker.x = parseFloat('{{ node_form.x.value }}');
					{% endif %}
					{% if node_form.y %}
						marker.y = parseFloat('{{ node_form.y.value }}');
					{% endif %}
					if(!marker.id) {
						markers.push(marker);
					}
					selected_marker = marker;
					show_marker_edit_form(selected_marker, form_issues);
				}
			{% else %}
				show_floor_plan_edit_form_initial();
			{% endif %}
        }
        
		// after document load
	    document.addEventListener('DOMContentLoaded', function() {
           // scroll to bottom of page
			window.scrollTo(0,document.body.scrollHeight);
			document.body.style.visibility = 'visible';
			load_state();
        });
	
    </script>
{% endblock %}