const issuesDiv = document.querySelector("#issues");
const issuesHolderDiv = document.querySelector("#issues-holder");

async function updateIssues() {
    let fetchResult = await (await fetch('/relay/hub_issues')).json()
    if (fetchResult.length > 0) {
        issuesDiv.removeAttribute("hidden");
        issuesHolderDiv.innerHTML = '';
        fetchResult.forEach((issue) => {
            let issueDiv = document.createElement("div");
            issueDiv.classList.add("issue");
            let detailsDiv = document.createElement("div");
            detailsDiv.classList.add("issue-details");
            issueDiv.append(detailsDiv);

            let titleSpan = document.createElement("span");
            titleSpan.classList.add("issue-title");
            detailsDiv.append(titleSpan);
            titleSpan.innerText = issue.title;


            let descriptionSpan = document.createElement("span");
            descriptionSpan.classList.add("issue-description");
            detailsDiv.append(descriptionSpan);
            let desc = () => {
                let body = issue.body.replaceAll("\r", "").replaceAll("\n", "  ");
                if (body.length > 100) {
                    return body.slice(0, 100) + "..."
                } else {
                    return body
                }
            };
            descriptionSpan.innerText = desc();

            let dataDiv = document.createElement("div");
            dataDiv.classList.add("issue-data");
            issueDiv.append(dataDiv);

            let statusSpan = document.createElement("span");
            statusSpan.classList.add("issue-status");
            dataDiv.append(statusSpan);
            statusSpan.innerText = issue.state;
            switch (issue.state) {
                case 'open':
                    statusSpan.style.color = "#ff8f8f";
                    break
                case 'closed':
                    statusSpan.style.color = "#8fff91";
                    break
            }

            let timeSpan = document.createElement("span");
            statusSpan.classList.add("issue-time");
            dataDiv.append(timeSpan);
            timeSpan.innerText = issue.updated_at;

            issuesHolderDiv.append(issueDiv)
        })
    } else issuesDiv.setAttribute("hidden", "true");
}

window.updateLoop.push(updateIssues);