function getCookieByName(cookieName) {
    let cookies = document.cookie.split(';');
    console.log(cookies)

    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].trim();
        
        if (cookie.startsWith(cookieName + "=")) {
            return cookie.substring((cookieName.length + 1), cookie.length);
        }
    }

    return null;
}

function htmlToObj(html) {
    const div = document.createElement('div');
    div.innerHTML = html
    return div.children[0]
}

function hideElement(element_query) {
    const element = document.querySelector(element_query);
    element.style.transition = 'opacity 0.25s ease';
    element.style.opacity = 0;
    element.style.pointerEvents = 'none';
}

function showElement(element_query) {
    const element = document.querySelector(element_query);
    element.style.transition = 'opacity 0.25s ease';
    element.style.opacity = 1;
    element.style.pointerEvents = 'auto';
}

function showPopup(popup_query) {
    let popupContainer = document.querySelector(popup_query);
    popupContainer.style.opacity = 1;
    popupContainer.style.pointerEvents = 'auto';
}

function hidePopup(popup_query) {
    let popupContainer = document.querySelector(popup_query);
    popupContainer.style.opacity = 0;
    popupContainer.style.pointerEvents = 'none';
}

function blurOutPage(url) {
    document.body.style.transition = 'opacity 0.25s ease';
    document.body.style.opacity = 0;
    setTimeout(() => {
        window.location.href = url
    }, 250)
    setTimeout(() => {
        blurInPage()
    }, 500)
}

function blurInPage() {
    document.body.style.transition = 'opacity 1s ease';
    setTimeout(() => {
        document.body.style.opacity = 1;
    }, 50);
    setTimeout(() => {
        document.body.style.transition = "none";
    }, 1051);
}

function applyEditCallbacks(editingSession, term) {
    term.addTermCallbacks(() => {
        console.log("locking term")
        editingSession.lock(term.id, "term")
    }, () => {
        console.log("updating term")
        editingSession.updateTerm(term.id, "term", term.getTerm())
        console.log('set to ' + term.getTerm())
        editingSession.unlock(term.id, "term")
    }, () => {})

    term.addAnswerCallbacks(() => {
        editingSession.lock(term.id, "answer")
    }, () => {
        editingSession.updateTerm(term.id, "answer", term.getAnswer())
        editingSession.unlock(term.id, "answer")
    }, () => {})

    term.addNoteCallbacks(() => {
        editingSession.lock(term.id, "note")
    }, () => {
        editingSession.updateTerm(term.id, "note", term.getNote())
        editingSession.unlock(term.id, "note")
    }, () => {})
}



class StudySheetEntryComponent {

    // Static factory method to create from a data object
    static fromJSON(json) {
        // Handle inconsistency: studysheet_id vs id
        let sheetId = json.studysheet_id != null ? json.studysheet_id : json.id;
        
        // Handle boolean conversion (DB uses public=1, component uses is_private)
        let isPrivate = (json.public == 0);

        return new StudySheetEntryComponent(
            json.name,       // title
            json.owner_name, // username
            json.length,     // term_count
            json.created,
            json.modified,
            sheetId,
            json.owner_id,
            isPrivate
        );
    }

    constructor(title, username, term_count, created, modified, sheet_id, author_id, is_private) {
        this.sheet_id = sheet_id;
        this.author_id = author_id;
        this.is_private = is_private;

        // Logic for icon state
        let icon_name = "Public";
        if (this.is_private) {
            icon_name = "Lock";
        }

        let html = `
        <div class="studysheet-entry" data-id=${this.sheet_id}>
            <div class="studysheet-entry-visible"> <div style="flex: 1;">
                    <h2>${title}</h2>
                    <div class="studysheet-user-container">
                        <img src="https://lye.software/api/v1/pfp?id=${this.author_id}" class="studysheet-pfp">
                        <p>${username}</p>
                    </div>
                </div>
                <div class="term-count">
                    ${term_count}
                </div>
            </div> 
            <div class="studysheet-entry-hover"> <div style="flex: 1; display: flex; flex-direction: column; gap: 5px;">
                    <p>Created: ${created}</p>
                    <p>Modified: ${modified}</p>
                </div>
                <div style="margin-bottom: 15px; display: flex; align-items: center; justify-content: center;">
                    <img src="/assets/${icon_name}.svg" style="width: 30px; aspect-ratio: 1/1;">
                </div>
            </div>
        </div>`;

        this.obj = htmlToObj(html);

        this.onSelectionChangeCallback = null;

        this.openEventListener = function (event) {
            if (typeof blurOutPage === "function") {
                blurOutPage(`/studysheet/${sheet_id}/view`);
            } else {
                // Fallback if blurOutPage isn't defined in this context
                window.location.href = `/studysheet/${sheet_id}/view`;
            }
        }
        this.selectEventListener = (event) => {
            this.obj.classList.toggle('ss-selected');
            if (this.onSelectionChangeCallback) {
                this.onSelectionChangeCallback();
            }
        }

    }

    addUserPageNavigationCallback() {
        this.obj.querySelector(".studysheet-user-container").addEventListener("click", (event) => {
            event.stopPropagation();
            window.location.href = `/user/${this.author_id}`;
        });
    }

    addNavigationCallback() {
        this.obj.removeEventListener("click", this.selectEventListener);
        this.obj.addEventListener("click", this.openEventListener);
    }

    addSelectMultipleCallback() {
        this.obj.removeEventListener("click", this.openEventListener);
        this.obj.addEventListener("click", this.selectEventListener);
    }

    setOnSelectionChangeCallback(callback) {
        this.onSelectionChangeCallback = callback;
    }

    getObj() {
        return this.obj;
    }
}





function populateStudysheetPage(container, studysheet, showStars=false, allowEdit=false) {
    if (allowEdit) {
        var editingSession = new EditingSession(null, studysheet.id, {})
        editingSession.connect()
    }

    if (Object.keys(studysheet.flatten()).length == 0) {
        let empty = document.createElement('div');
        empty.innerHTML = 'This studysheet is empty';

        empty.style.display = 'flex';
        empty.style.justifyContent = 'center';
        empty.style.alignItems = 'center';

        empty.style.fontSize = '20px';
        empty.style.fontWeight = 'bold';
        
        empty.style.borderRadius = '25px';
        empty.style.marginTop = '20px';

        container.append(empty);
        return;
    }
        

    let elems = []

    let studysheet_content = studysheet.getContent();

    for (let i = 0; i < studysheet_content.length; i++) { // group level
        let subgroup = studysheet_content[i].subterms
        console.log(subgroup)
        for (let j = 0; j<subgroup.length; j++) {
            let isMulti = ("subterms" in subgroup[j] && subgroup[j].subterms.length > 0)
            let term = studysheet_content[i].subterms[j]
            let termElem = TermComponent.fromTermJSON(term)
            if (showStars && !isMulti) {
                termElem.addStarCallback(() => {
                    termElem.toggleStar()
                    studysheet.starTerm(termElem.id)
                })
            }
            if (allowEdit) {
                applyEditCallbacks(editingSession, termElem)
                termElem.enableTextAreaEditing()
            }
            elems.push(termElem.getObj())
            

            if (isMulti) {
                for (let k = 0; k<term.subterms.length; k++){
                    let subterm = term.subterms[k]
                    let subtermElem = TermComponent.fromTermJSON(subterm)
                    subtermElem.makeMulti(term.id)
                    if (showStars) {
                        subtermElem.addStarCallback(() => {
                            subtermElem.toggleStar()
                            studysheet.starTerm(subtermElem.id)
                        })
                    }
                    if (allowEdit) {
                        applyEditCallbacks(editingSession, subtermElem)
                        subtermElem.enableTextAreaEditing()
                    }
                    elems.push(subtermElem.getObj())
                }
            }
        }
    }
    for (let i = 0; i < elems.length; i++) {
        container.append(elems[i]);
    }
}

function populateStars(starData) {
    for (let starred of starData) {
        let elem = document.getElementById(starred)
        if (elem) {
            elem.querySelector(".star").classList.add("selected")
        }
    }
}

function displaySheetList(container, sheet_list) {
    let sheetElems = []
    
    for (let i = 0; i < sheet_list.length; i++) {
        let component = StudySheetEntryComponent.fromJSON(sheet_list[i]);
        sheetElems.push(component.getObj());
    }

    for (let i = 0; i < sheetElems.length; i++) {
        container.append(sheetElems[i]);
    }
}

function buildErrorPopup(string) {
    let popup = new PopupBuilder(500);
    popup.add(new PopupText("Error").setStyle("font-size: 25px; font-weight:bold; width: 100%; text-align: left;"))
    popup.add(new PopupText(string).setStyle("width: 100%; text-align: left; margin-bottom: 10px;"))
    popup.add(new PopupButton("Ok", () => { window.location.href = "/" }).setStyle("width: 100%;"))
    return popup
}

function imageUrlForId(imageId) {
    if (imageId[0] == "/") {
        return imageId;
    }
    return "/api/image/" + imageId;
}