var displayedTicketID = -1;
    filters = {"ordering": "-edit_timestamp", "page_size": 100};
    editor = null;
    searchTimeout = null;
    loadingTickets = false;

const formControls = [
    {
        id: "newTitle",
        validation: function(element) {
            const value = element.val();
            return (!element.attr("required") || value.trim() !== "")
        },
        errorMessage: function(element) {
            return "This field is required."
        }
    }
];

$(document).ready(function() {
    ClassicEditor
        .create( document.getElementById("newDesc"), {})
        .then( newEditor => {
            editor = newEditor;
        })
        .catch( error => {
            console.error(error)
        });

    $("#searchTickets").keyup(() => {
        $("#ticketsContainer .content").empty();
        $("#ticketsContainer .none-found").hide();
        $("#ticketsContainer .loading").show();
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            console.debug("searching");
            value = $("#searchTickets").val();
            if (value === "") {
                console.debug("deleted search filters");
                delete filters["search"];
            }
            else {
                console.debug("updated search filters");
                filters["search"] = value;
            }

            loadAllTickets();
        }, 500);
    })

    setupFilter("#filterSidebar .filter-department", "author__department");
    setupFilter("#filterSidebar .filter-tags", "tags");
    setupFilter("#filterSidebar .filter-priority", "priority");
 
    loadFilterCounts();
    loadAllTickets();

    $(".select2-selection__choice").each(function() {
        // Work out how to apply the colours of the tags to the selection choices.
    })
});

function setupFilter(selector, key) {
    $(selector).each(function () {
        var input = $(this).find("input[type=checkbox], input[type=radio]");
        var uuid = input.val();

        input.on("change", function () {

            if (input.is(":checkbox")) {

                if ($(this).is(":checked")) {
                    filters[key] = filters[key] || [];
                    filters[key].push(uuid);
                }
                else {
                    filters[key] = filters[key].filter(id => id !== uuid);
                    if (filters[key].length === 0) {
                        delete filters[key];
                    }
                }
            }
            else if (input.is(":radio") && input.is(":checked")) {
                if (uuid === "all") {
                    delete filters[key];
                }
                else {
                    filters[key] = [uuid];
                }
            }

            console.debug(`Filter applied '${key}' as '${uuid}'`)
            loadAllTickets();
        });
    });
}

function validateForm() {

    $("#ticketModal form").find(".form-control,.form-select").removeClass("is-valid is-invalid");
    $("#ticketModal form .invalid-feedback").text("");

    var valid = true;

    formControls.forEach(function(control) {
        var element = $("#" + control.id);
        if (!control.validation(element)) {
            element.addClass("is-invalid");
            element.siblings(".invalid-feedback").text(control.errorMessage(element));
            valid = false;
        }
        else {
            element.addClass("is-valid");
        }
    });

    return valid;
}

$("#ticketModal form").on("submit", function(event) {
    event.preventDefault();

    if (!validateForm()) {
        return;
    }

    $.ajax({
        url: URL_NewTicket,
        type: "POST",
        dataType: "json",
        data: {
            csrfmiddlewaretoken: CSRFMiddlewareToken,
            title: $("#newTitle").val(),
            description: editor.getData(),
            author_id: CurrentUserID,
            priority_id: $("#newPriority").val(),
            tag_ids: $("#newTags").val()
        },
        success: function(data) {
            loadAllTickets();
            loadFilterCounts();
        },
        error: function(data) {
            alert(JSON.stringify(data, null, 4))
        }
    });
});

function getOrdinalSuffix(day) {
    if (day >= 11 && day <= 13) {
        return day + 'th';
    } else {
        switch (day % 10) {
            case 1: return day + 'st';
            case 2: return day + 'nd';
            case 3: return day + 'rd';
            default: return day + 'th';
        }
    }
}

function updateFilterCounts(filterType, data) {
    $("#filterSidebar .filter-" + filterType).each(function() {
        var uuid = $(this).find("input[type=checkbox],input[type=radio]").val();
        var count = data[filterType][uuid];
        $(this).find(".badge").text(count);
    });
}

function loadFilterCounts() {
    $.ajax({
        url: URL_FilterCounts,
        type: "GET",
        success: function(data) {
            updateFilterCounts('priority', data);
            updateFilterCounts('tags', data);
            updateFilterCounts('department', data);

            $("#filterPriorityAll .badge").text(data.tickets);
            $("#filterDepartmentAll .badge").text(data.tickets)
            $("#ticketCounts .total").text(data.tickets)
        },
        error: function(data) {
            console.error(JSON.stringify(data, null, 4))
        }
    });
}

function timestampToHumanDate(timestamp, wasYesterday) {
    if (wasYesterday) {
        var day = getOrdinalSuffix(timestamp.getDate());
        var month = timestamp.toLocaleString('en-GB', { month: 'short' });
        var year = timestamp.toLocaleString('en-GB', { year: 'numeric' });
        var time = timestamp.toLocaleString('en-GB', { hour: 'numeric', minute: 'numeric' });
        return time + ', ' + day + ' ' + month + ' ' + year;
    }

    var hours = timestamp.getUTCHours();
    var minutes = timestamp.getUTCMinutes();
    return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0');
}

function loadAllTickets() {
    if (loadingTickets === true) {
        return;
    }

    $("#ticketsContainer .content").empty();
    $("#ticketsContainer .none-found").hide();
    $("#ticketsContainer .loading").show();

    loadingTickets = true;
    // alert(JSON.stringify(filters, null, 4));

    $.ajax({
        url: URL_Tickets,
        type: "GET",
        dataType: "json",
        data: $.param(filters, true),
        success: function(data) {
            loadingTickets = false;
            // console.log(JSON.stringify(data, null, 4))

            $("#ticketCounts .current").text(data.results.length);
            $("#ticketsContainer .loading").hide();

            if (data.results.length === 0) $("#ticketsContainer .none-found").show();
            else $("#ticketsContainer .none-found").hide();

            data.results.forEach(function(ticket) {
                var timestamp = new Date(ticket.timestamp);
                var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);

                if (ticket.is_edited) {
                    formattedTime += " • edited";
                }

                var template = $($("#ticketItemTemplate").html());
                template.find(".ticket-item-author").text(`${ticket.author.forename} ${ticket.author.surname}`);
                template.find(".ticket-item-datetime").text(formattedTime);
                template.find(".ticket-item-title").text(ticket.title);
                template.find(".ticket-item-desc").text(ticket.description);
                template.find(".ticket-item-icon").attr("src", ticket.author.icon);
                template.attr("data-uuid", ticket.uuid);

                $("#ticketsContainer .content").append(template);
            });

            applyTicketClickFunction();
        },
        error: function(data) {
            loadingTickets = false;
            $("#ticketsContainer .content").empty();
            $("#ticketsContainer .none-found").hide();
            $("#ticketsContainer .loading").hide();

            if (data.status === 429) {
                alert(`HTTP ${data.status} - ${data.statusText}\n${data.responseJSON.detail}`)
            }
        }
    });
}

function applyTicketClickFunction() {
    $(".ticket-item").on("click", function(e) {
        e.preventDefault();
        displayTicket(this);
        $('.email-app').removeClass('side-active');
        $('.email-content').toggleClass('open');
    });
}

function reloadCurrentTicket() {
    displayTicket($(".ticket-item.bgc-grey-100"));
}

function changeTicket(next=true) {
    var selectedTicket = $(".ticket-item.bgc-grey-100");

    if (!selectedTicket.length) {
        displayTicket($(".ticket-item").first());
        return;
    }

    if (next) {
        displayTicket(selectedTicket.next());
    }
    else {
        displayTicket(selectedTicket.prev());
    }

    if (!$('.email-content').hasClass('open')) {
        $('.email-content').addClass('open');
    }
}

function displayTicket(ticketElement) {
    ticket = $(ticketElement);
    ticketID = ticket.data("uuid");

    // $(".back-to-mailbox").off("click").on("click", function(event) {
    //     event.preventDefault();
    //     $('.email-content').toggleClass('open');
    //     displayTicket(ticketElement);
    // });
    
    
    if (displayedTicketID === ticketID) {
        // displayedTicketID = -1;
        return;
    }

    ticket.siblings().removeClass("bgc-grey-100");
    ticket.addClass("bgc-grey-100");

    $("#ticketTitle").text("")
    $("#ticketDesc").empty();
    $("#ticketAuthor").text("");
    $("#ticketAuthorImg").hide();
    $("#ticketAuthorImg").prop("src", "");
    $("#ticketTimestamp").text("");
    $("#btnGroupDrop2").hide();
    $("#ticketBadges").empty().hide();

    
    displayedTicketID = ticketID;

    $.ajax({
        url: URL_Tickets,
        type: 'get',
        dataType: 'json',
        data: $.param({uuid: ticketID}, true),
        success: function (data) {
            console.log(JSON.stringify(data, null, 4));

            var ticket = data.results[0];
            var author = ticket.author;
            var department = author.department;
            var priority = ticket.priority;

            $("#ticketTitle").text(ticket.title);
            $("#ticketDesc").append($(`<div class="w-100">${ticket.description}</div>`));
            $("#ticketAuthor").text(`${author.forename} ${author.surname}`);
            $("#ticketAuthorImg").show();
            $("#ticketAuthorImg").prop("src", author.icon);
            $("#btnGroupDrop2").show();
            $("#ticketBadges").show();

            $("#ticketBadges").append($(`<div class="badge me-1" style="color: ${priority.colour}; background-color: ${priority.backgroundcolour};">${priority.title} Priority <i class="ti-control-record "></i></div>`));

            if (department != null) {
                $("#ticketBadges").append($(`<div class="badge bgc-deep-purple-500 me-1">${department.title}</div>`));
            }

            ticket.tags.forEach(function(tag) {
                $("#ticketBadges").append($(`<div class="badge me-1" style="color: ${tag.colour}; background-color: ${tag.backgroundcolour};">${tag.title} <i class="ti-tag"></i></div>`));
            });

            // timestamp
            var timestamp = new Date(ticket.timestamp);
            var formattedTime = timestampToHumanDate(timestamp, ticket.was_yesterday);

            if (ticket.is_edited) {
                formattedTime += " • edited";
            }

            $("#ticketTimestamp").text(formattedTime);
        },
        error: function(message) {
            alert(JSON.stringify(message, null, 4));
        }
    });
}