{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/manager_ribbon.css' %}">
{{ block.super }}
{% endblock %}

{% block content %}
{{block.super}}
<script>
    var node_parents = {
    {% for pipe in pipe_list %}
    {% for step in pipe.steps %}
    {% if not step.is_empty %} "{{ step.complete_name }}" : [{% for item in step.requirement_stack %}"{{ item }}", {% endfor %}], {% endif %}
    {% endfor %}
    {% endfor %}
    };

    console.log(node_parents)

    // Function to highlight a node
    function highlightNode(node_id) {
        var inner_node = document.getElementById(node_id).querySelector('.node_internal');
        inner_node.classList.add('highlighted_requirement');
    }

    function highlightLine(current_node, parent_node) {
        var line = document.getElementById(current_node + "-" + parent_node);
        line.stroke = "green";
        line.style = "stroke:green;stroke-width:8";
    }

    // Function to restore a node's style
    function restoreNodeStyle(node_id) {
        var inner_node = document.getElementById(node_id).querySelector('.node_internal');
        inner_node.classList.remove('highlighted_requirement');
    }

    function restoreLineStyle(current_node, parent_node) {
        var line = document.getElementById(current_node + "-" + parent_node);
        line.stroke = "black";
        line.style = "stroke:black;stroke-width:1";
    }

    function check_parents(node_id, highlight = true) {
        if (node_parents.hasOwnProperty(node_id)) {
            var parent_ids = node_parents[node_id];
            for (let j = 0; j < parent_ids.length; j++) {
                if (highlight) {
                    highlightNode(parent_ids[j]);
                    highlightLine(node_id, parent_ids[j]);
                }
                else {
                    restoreNodeStyle(parent_ids[j]);
                    restoreLineStyle(node_id, parent_ids[j]);
                }
                check_parents(parent_ids[j], highlight);
            }
        }
    }

    function mouse_in_node() {
        var node_id = this.id;
        check_parents(node_id, true);
        // if (node_parents.hasOwnProperty(node_id)) {
        //     var parent_ids = node_parents[node_id];
        //     for (let j = 0; j < parent_ids.length; j++) {
        //         highlightNode(parent_ids[j]);
        //         var line = document.getElementById(node_id + "-" + parent_ids[j]);
        //         line.stroke = "green";
        //         line.style = "stroke:green;stroke-width:8";
        //     }
        // }
    }

    function mouse_out_node() {
        var node_id = this.id;
        check_parents(node_id, false);
        // if (node_parents.hasOwnProperty(node_id)) {
        //     var parent_ids = node_parents[node_id];
        //     for (let j = 0; j < parent_ids.length; j++) {
        //         restoreNodeStyle(parent_ids[j]);
        //         var line = document.getElementById(node_id + "-" + parent_ids[j]);
        //         line.stroke = "black";
        //         line.style = "stroke:black;stroke-width:1";
        //     }
        // }
    }

    function connectElements(element1, element2) {
        var svg = document.querySelector('svg');
        var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');

        line.setAttribute('stroke', 'black');

        svg.appendChild(line);

        var rect1 = element1.getBoundingClientRect();
        var rect2 = element2.getBoundingClientRect();

        var svgRect = svg.getBoundingClientRect();

        line.setAttribute('x1', rect1.left + rect1.width / 2 - svgRect.left);
        line.setAttribute('y1', rect1.top + rect1.height / 2 - svgRect.top);
        line.setAttribute('x2', rect2.left + rect2.width / 2 - svgRect.left);
        line.setAttribute('y2', rect2.top + rect2.height / 2 - svgRect.top);
        line.id = element1.id + "-" + element2.id;
        console.log(element1.id)
        console.log(element2.id)
        console.log(line)
    }

    function create_lines(node) {
        var node_id = node.id;
        if (node_parents.hasOwnProperty(node_id)) {
            var parent_ids = node_parents[node_id];
            for (let i = 0; i < parent_ids.length; i++) {
                var parent = document.getElementById(parent_ids[i]);
                connectElements(node, parent);
            }
        }
    }

    function startup() {
        var all_nodes = document.getElementsByClassName('node');
        console.log("all_nodes")
        console.log(all_nodes)
        for (let i = 0; i < all_nodes.length; i++) {
            all_nodes[i].addEventListener('mouseover', mouse_in_node);
            all_nodes[i].addEventListener('mouseout', mouse_out_node);
            create_lines(all_nodes[i]);
            console.log("startup")
            console.log(all_nodes[i])
        }
    }
    document.addEventListener('DOMContentLoaded', startup);

</script>


<div class="horizontal-band">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="pipelineDropdown" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            Select Pipeline
        </button>
        <div class="dropdown-menu" aria-labelledby="pipelineDropdown">
            {% for key, value in available_pipelines.items %}
            <a class="dropdown-item" href="{{ value }}">{{ key }}</a>
            {% endfor %}
        </div>
    </div>
    
    <button class="btn btn-primary" onclick="location.href='{{ origin_url }}?refresh_pipeline=true';">↺</button>

    <div class="spacer"></div>

    <button class="btn btn-primary" onclick="location.href='{{ flower_url }}';">Task Queue & Workers Management</button>
    <button class="btn btn-primary" onclick="location.href='{{ rabbitmq_url }}';">RabbitMQ Message Broker Management</button>

    <div class="dropdown status-text">
        <button class="btn btn-primary dropdown-toggle" type="button" id="workerDropdown" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <span class="status-indicator {{ worker_status_color }}"></span>
            Workers Status: {{ worker_status_description }}
        </button>
        <div class="dropdown-menu" aria-labelledby="workerDropdown">
            {% for worker_name in available_workers %}
            <span class="dropdown-item">{{ worker_name }}</span>
            {% endfor %}
        </div>
    </div>
</div>

<span class="split_screen">

    <div class="container">
        <div class="container_title">Select task in the {{ selected_pipeline }} pipeline</div>
        <div class="scrollable">
            <div class="graph_container">
                <svg></svg>
                <div class="graph">

                    {% for pipe in pipe_list %}
                    <div class="graph_column">
                        <div class="column_title">{{ pipe.name }}</div>
                        {% for step in pipe.steps %}
                        {% if step.is_empty %}
                        <div class="node_location"></div>
                        {% else %}
                        <div class="node node_location{% if step.is_selected %} selected_node{% endif %}"
                            id="{{ step.complete_name }}">
                            <a class="node_internal" href="{{ step.url }}">{{ step.name }}</a>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    {% if step_name %}
    <div class="separator vertical"></div>

    <div class="container">
        <div class="container_title">Tune arguments</div>
        <div class="scrollable">
            <div class="arguments_view_container">
                <form action="{{ origin_url }}" method="post">
                    <div class="form_flex">
                        {% csrf_token %}
                        {{ form }}
                    </div>
                    <input type="submit" value="Update arguments values" style="margin:20px;">
                </form>
                <div class="separator horizontal"></div>
                <div class="container_title">Launch task and requirements<br>{{selected_task_name}}</div>
                <a href="{{ run_url }}" class="run_button">Run task</a>
                <span style="font-size:12px; text-align:center;">This will queue up the task on the processing celery
                    cluster, if available.<br>Remember to update arguments first !</span>
                <span>
            </div>
        </div>
    </div>
    {% endif %}
</span>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var dropdowns = document.querySelectorAll('.dropdown');

    dropdowns.forEach(function (dropdown) {
        var button = dropdown.querySelector('.dropdown-toggle');
        var menu = dropdown.querySelector('.dropdown-menu');

        button.addEventListener('click', function (e) {
            e.preventDefault();
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
        });
    });

    document.addEventListener('click', function (e) {
        dropdowns.forEach(function (dropdown) {
            var button = dropdown.querySelector('.dropdown-toggle');
            var menu = dropdown.querySelector('.dropdown-menu');

            if (!button.contains(e.target) && !menu.contains(e.target)) {
                menu.style.display = 'none';
            }
        });
    });
});
</script>

{% endblock %}