{% extends "support.html" %}

{% block head %}
<script>
    let dafe_list = [];
    let datless_check_data = JSON.parse('{{datless_check_data|escapejs}}');

    function update_warning_images() {
        let warning_image = '<img src="{{ STATIC_URL }}img/orange_circle.png"/>';
        $.each(datless_check_data, function(dafe, dafe_datless_check_data) {
            $.each(dafe_datless_check_data, function(location, location_error) {
                let canister = $(`#${dafe}___${location}`);
                location_error = location_error.trim();
                if (location_error !== '' && location_error !== 'MISSING CANISTER FILE') {
                    if (canister.children('img').length === 0) {
                        canister.append(warning_image);
                    }
                    canister.data('errors', location_error);
                } else {
                    canister.data('errors', '');
                    canister.children('img').remove();
                }
            });
        });
    }


    function reload_dat_data() {
        $.ajax({
            url: "{% url 'support:refresh-dat-file' %}",
            method: 'GET',
            success: function(dat_info) {
                let datless_data = dat_info['datless_data'];
                datless_check_data = dat_info['datless_check_data'];
                update_warning_images();

                $.each(datless_data, function(dafe, dafe_datless_data) {
                    $.each(dafe_datless_data, function(location, timestamp) {
                        let canister = $(`#${dafe}___${location}`);
                        canister.data('time', timestamp)
                        if (timestamp === '') {
                            canister.removeClass('canister-blue');
                            canister.addClass('can-grey');
                            canister.children('img').remove();
                        } else {
                            canister.removeClass('can-grey');
                            canister.addClass('canister-blue');
                        }
                    });
                });
            }
        });
    }

    function open_canister_info(can) {
        let has_dat_file = $(can).hasClass('canister-blue')
        let location = $(can).data('location');
        let dafe = '';

        reset_map_status();

        if (has_dat_file){
            let can_id = $(can).attr('id');
            let time = $(can).data('time');
            let errors = $(can).data('errors');
            dafe = can_id.split('___')[0];

            $.ajax({
                url: `{% url 'support:get-dat-file' %}?dafe=${dafe}&location=${location}`,
                type: 'GET',
                success: function(dat_info) {
                    let errors_panel = `<pre style="font-family: monospace; overflow-y: scroll; max-height: 70vh; border: 1px solid red;">${errors}</pre>`
                    // unreachable dat files will return "Error retrieving dat file for..."
                    // if (dat_info.indexOf('Error') === -1) {
                    //     $(`#delete-selected-${dafe}`).css('display', 'inline');
                    // }
                    $(`#delete-selected-${dafe}`).css('display', 'inline');
                    $('#right-panel').empty();
                    $('#right-panel').append(`<h2 style="text-align: center; margin-bottom: 0;">${location}</h2>`);
                    $('#right-panel').append(`<h4 style="text-align: center; margin-top: 0;">Created: ${time}</h4>`);
                    if (errors !== '') {
                        $('#right-panel').append(errors_panel);
                    }
                    $('#right-panel').append(dat_info);
                }
            });
        } else {
            $('#right-panel').empty();
            $('#right-panel').append(`<h2 style="text-align: center;">${location}</h2>`);
            $('#right-panel').append('<pre style="font-family: monospace;">No Canister.dat file found in this location</pre>');
            $("button[id^='delete-selected-']").css('display', 'none');
        }

        $('.canister').css('box-shadow', '2px 2px 1px #cccccc');
        $('.canister').removeClass('selected');

        $(can).css('box-shadow', '0px 0px 3px 4px orange');
        $(can).addClass('selected');
        $(`#delete_location_${dafe}`).text(location);
    }

    function reset_map_status() {
        $('#right-panel').empty();
        $('.canister').css('box-shadow', '2px 2px 1px #cccccc');
        $('.canister').removeClass('selected');
        $("button[id^='delete-selected-']").css('display', 'none');
        $('.options-box').remove();
        $('.select-icon').removeClass('icon-chevron-down');
        $('.select-icon').addClass('icon-chevron-left');
    }

    $(function () {
        $('h2[id^="map_header_multi___"]').each(function() {
            dafe_list.push($(this).attr('id').split('___')[1]);
        });

        $('h2[id^="map_header_multi_"]').on('click', function() {
            if ($($('.select-icon')[0]).hasClass('icon-chevron-left')) {
                $('.options-box').remove();
                let optionsBox = $('<div class="options-box"></div>');
                dafe_list.forEach(function(dafe) {
                    optionsBox.append('<p>' + dafe + '</p>');
                });
                $(this).after(optionsBox);

                optionsBox.find('p').click(function() {
                    let old_dafe = $($($('.options-box')[0]).siblings()[0]).text();
                    let new_dafe = $(this).text();
                    $(`#${old_dafe}_full_container`).css('display', 'none');
                    $(`#${new_dafe}_full_container`).css('display', 'flex');
                    reset_map_status();
                });
                $('.select-icon').removeClass('icon-chevron-left');
                $('.select-icon').addClass('icon-chevron-down');
            } else {
                $('.options-box').remove();
                $('.select-icon').removeClass('icon-chevron-down');
                $('.select-icon').addClass('icon-chevron-left');
            }
        })

        for (const i in dafe_list) {
            let dafe = dafe_list[i];
            if (i > 0) {
                $(`#${dafe}_full_container`).css('display', 'none');
            }
        }

        // add warning images / messages to problematic locations
        update_warning_images();

        // reload page data 5 times per minute, or slightly more frequently than a canister should finish
        setInterval(function() {
            reload_dat_data();
        }, 12000);


        $("#confirm-delete-modal").dialog({
            autoOpen: false,
            closeOnEscape: true,
            modal: true,
            draggable: false,
            width: 400,
            position: { my: "center", at: "center", of: window },
            buttons: [
                {
                    text: "Confirm",
                    "class": 'modal-dialog-button-float-right',
                    click: function () {
                        let modal = $(this)
                        let dafe = $('#confirm-delete-content').data('dafe');
                        let location = $('#confirm-delete-content').data('location');
                        $.ajax({
                            url: `{% url 'support:delete-dat-file' %}?dafe=${dafe}&location=${location}`,
                            type: 'GET',
                            success: function(dat_info) {
                                if (dat_info === 'unknown' || dat_info === 'error') {

                                } else {
                                    dat_info = JSON.parse(dat_info);
                                    for (let key in dat_info) {
                                        let info = dat_info[key]
                                        let canister = $(`#${dafe}___${key}`);
                                        if (info === '') {
                                            canister.removeClass('canister-blue');
                                            canister.addClass('can-grey');
                                            canister.children('img').remove();
                                        } else {
                                            canister.removeClass('can-grey');
                                            canister.addClass('canister-blue');
                                        }
                                    }
                                }
                                modal.dialog("close");
                            }
                        });
                    }
                },
                {
                    text: "Cancel",
                    "class": 'modal-dialog-button-float-left',
                    click: function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });

        $('button[id^="delete-"]').on('click', function() {
            let delete_type = $(this).attr('id').split('-')[1];
            let dafe = $(this).attr('id').split('-')[2];

            let location = '';
            if (delete_type === 'selected') {
                location = $($('.selected')[0]).data('location');
                $('#confirm-delete-content').text(`Do you want to delete canister.dat at ${location} in ${dafe}?`)
            } else if (delete_type === 'all') {
                location = 'all'
                $('#confirm-delete-content').text(`Are you sure you want to delete ALL canister.dats for ${dafe}?`)
            }

            $('#confirm-delete-content').data('dafe', dafe);
            $('#confirm-delete-content').data('location', location);

            $("#confirm-delete-modal").dialog("open");
        });

        $('div[id^="map_change_"]').on('click', function() {
            let _this = $(this);
            let direction = _this.attr('id').split('_')[2];
            let dafe = _this.attr('id').split('___')[1];
            let idx = dafe_list.indexOf(dafe);
            if (direction === 'right') {
                // handle end of list
                idx = idx + 1;
                if (idx === dafe_list.length) {
                    idx = 0
                }
            } else {
                idx = idx - 1;
                if (idx === -1) {
                    idx = dafe_list.length - 1;
                }
            }
            let new_dafe = dafe_list[idx];
            $(`#${dafe}_full_container`).css('display', 'none');
            $(`#${new_dafe}_full_container`).css('display', 'flex');

            reset_map_status();
        })
    })
</script>
<style>
    html {
        overflow: scroll;
    }

    #datless-wrapper {
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
    }

    #datless-wrapper > div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #left-panel {
        width: 45%;
    }

    #right-panel {
        width: 55%;
        min-width: 55%
    }

    .canister-blue {
        background: deepskyblue linear-gradient(to bottom, deepskyblue , deepskyblue ) repeat-x;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        color: black;
    }

    .canister-blue:hover {
        background-color: deepskyblue;
        color: #ffffff;
    }

    #left-panel {
        width: 100%;
        text-align: center;
    }

    .delete_div {
        padding-top: 3vh;
        display: flex;
        justify-content: space-evenly;
        width: 100%
    }

    .delete_div > button {
        font-size: 2.5vh;
        padding-top: 1vh;
        padding-bottom: 1vh;
    }

    .canister {
        user-select: none;
    }

    div[id$="_full_container"] {
        display: flex;
        margin-top: 3rem;
    }

    div[id^="map_change_"] {
        display: flex;
        align-items: center;
        background-color: lightblue;
        font-size: 3rem;
        padding-left: 1rem;
        padding-right: 1rem;
        border-radius: 2rem;
        border: .2rem solid lightblue;
    }

    div[id^="map_change_"]:hover {
        border-color: #2d6ba3;
    }

    .map_container {
        padding-right: 1em;
        padding-left: 1em;
    }

    button[id^="delete-"] {
        user-select: none;
    }

    h2[id^="map_header_"] {
        border: 1px solid white;
        position: relative;
        text-align: center;
        user-select: none;
    }

    h2[id^="map_header_"] > i {
        position: absolute;
        left: 90%;
        top: 15%;
    }

    h2[id^="map_header_multi_"]:hover {
        cursor: pointer;
        border: 1px solid grey;
        border-radius: 1rem;
    }

    .options-box {
        position: absolute;
        left: 17.5%;
        border: 3px solid black;
        z-index: 1000;
        width: 200px;
    }

    .options-box > p {
        margin: 0;
        padding-bottom: .5rem;
        padding-top: .5rem;
        user-select: none;
    }

    .options-box > p:hover {
        border: 3px solid black!important;
        cursor: pointer;
        border-left: none!important;
        border-right: none!important;
    }

    .options-box > p:first-child:hover {
        border: 3px solid black!important;
        cursor: pointer;
        border-left: none!important;
        border-right: none!important;
        border-top: 3px solid transparent!important;
    }

    .options-box > p:nth-last-child(1):hover {
        border: 3px solid black!important;
        cursor: pointer;
        border-left: none!important;
        border-right: none!important;
        border-bottom: 3px solid transparent!important;
    }

    .options-box > p:nth-child(even) {
        background-color: #f9f9f9;
        border: 3px solid #f9f9f9;
        border-left: none;
        border-right: none;
    }

    .options-box > p:nth-child(odd) {
        background-color: #fff;
        border: 3px solid #fff;
        border-left: none;
        border-right: none;
    }
</style>
{% endblock %}

{% block content %}
<div id="datless-wrapper">
    <div id="left-panel">
        {% for dafe, location_list in datless_data.items %}
            <div id="{{dafe}}_full_container">
                {% if datless_data|length > 1 %}
                    <div id="map_change_left___{{dafe}}">
                        <i class="icon-chevron-left"></i>
                    </div>
                {% endif %}
                <div class="map_container">
                    {% if datless_data|length > 1 %}
                        <h2 id="map_header_multi___{{dafe}}" style="text-align: center;">{{dafe}}<i class="icon-chevron-left select-icon"></i></h2>
                    {% else %}
                        <h2 id="map_header___{{dafe}}" style="text-align: center;">{{dafe}}</h2>
                    {% endif %}
                    {% for location, time in location_list.items %}
                        {% if location in start_keys %}
                            <div class="map-row" style="white-space: nowrap">
                        {% endif %}
                            {% if time == '' %}
                                <div class="canister col btn can-grey"
                                     id="{{dafe}}___{{location}}"
                                     data-time="{{time}}"
                                     data-location="{{location}}"
                                     style="padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; box-shadow: 2px 2px 1px #cccccc;"
                                     onclick="open_canister_info(this)">
                                    <div class="name">{{location}}</div>
                                    <i class="icon-white icon-2x"></i>
                                </div>
                            {% else %}
                                <div class="canister col btn canister-blue"
                                     id="{{dafe}}___{{location}}"
                                     data-time="{{time}}"
                                     data-location="{{location}}"
                                     style="padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; box-shadow: 2px 2px 1px #cccccc;"
                                     onclick="open_canister_info(this)">
                                    <div class="name">{{location}}</div>
                                    <i class="icon-white icon-2x"></i>
                                </div>
                            {% endif %}
                        {% if location in end_keys %}
                            </div>
                        {% endif %}
                    {% endfor %}
                    <div class="delete_div">
                        <button id="delete-selected-{{dafe}}" style="display: none;">Delete <span id="delete_location_{{dafe}}"></span></button>
                        <button id="delete-all-{{dafe}}">Delete All in {{dafe}}</button>
                    </div>
                </div>
                {% if datless_data|length > 1 %}
                    <div id="map_change_right___{{dafe}}" class="col-1">
                        <i class="icon-chevron-right"></i>
                    </div>
                {% endif %}
            </div>
        {% endfor %}
    </div>
    <div id="right-panel">
    </div>
</div>

<div id="confirm-delete-modal" title="Confirm Deletion" style="margin-left: 2px;">
    <div id="confirm-delete-content"></div>
</div>
{% endblock %}