function create_studysheet_entry(title, username, term_count, created, modified, sheet_id, author_id, is_private) {
    // convert viewership to boolean
    // 1 = public, 0 = private
    icon_name = "Public"
    if (is_private) {
        icon_name = "Lock"
    }

    let html = `
    <div class="studysheet-entry" data-id=${sheet_id}>
        <div class="studysheet-entry-visible"> <!-- always visible -->
            <div style="flex: 1;">
                <h2>${title}</h2>
                <div class="studysheet-user-container">
                    <img src="https://lye.software/api/v1/pfp?id=${author_id}" class="studysheet-pfp">
                    <p>${username}</p>
                </div>
            </div>
            <div class="term-count">
                ${term_count}
            </div>
        </div> 
        <div class="studysheet-entry-hover"> <!-- visible on 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>`

    let obj = htmlToObj(html);
    obj.querySelector(".studysheet-user-container").addEventListener("click", function(event) {
        event.stopPropagation();
        // blurOutPage(`/user/${author_id}`)
        window.location.href = `/user/${author_id}`
    })
    obj.addEventListener("click", function(event) {
        blurOutPage(`/studysheet/${sheet_id}/view`)
    })
    return obj;
}

class TermComponent {

    static draggedTerms = [];
    static termMap = {}
    static getById(id) {
        return TermComponent.termMap[id];
    }

    static fromTermJSON(term) {
        let termElem = new TermComponent(term.id)
        termElem.setTerm(term.term)
        termElem.setAnswer(term.answer)

        if ("image-term" in term) {
            termElem.setTermImage(term["image-term"])
        }
        if ("image-answer" in term) {
            termElem.setAnswerImage(term["image-answer"])
        }
        if ("note" in term) {
            termElem.setNoteVisibile(true)
            termElem.setNote(term.note)
        }
        if ("subterms" in term && term.subterms.length > 0) {
            for (let k = 0; k<term.subterms.length; k++){
                let subterm = term.subterms[k]
                let subtermElem = TermComponent.fromTermJSON(subterm)

                termElem.makeMultiHead(subtermElem)
                subtermElem.makeMulti(term.id)
            }
        }
        return termElem;
    }

    constructor(id) {
        let html_data = `
        <div id="${id}" style="transition: margin-top 0.1s; margin-bottom: 0.1s;" class="term-component">
            <div class="image-container">
                <div><img class="image-term term-image" style="display: none;" ></div>
                <div><img class="image-answer term-image" style="display: none;"></div>
            </div>
            <div class="term-container">
                <div>
                    <img style="height: 30px; display: none;" src="/assets/drag.svg" id="drag-handle" draggable="false">
                    <textarea class="term" readonly></textarea>
                    <textarea class="definition" readonly></textarea>
                    <div class="star" style="display: none;">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -5.0 110.0 110.0">
                            <path d="m93.824 44.383-13.766 16.996c-0.98047 1.2109-1.4805 2.7422-1.3984 4.3008l1.1445 21.84c0.19922 3.8008-3.5781 6.5469-7.1328 5.1797l-20.418-7.8398c-1.457-0.55859-3.0664-0.55859-4.5195 0l-20.418 7.8398c-3.5508 1.3633-7.332-1.3828-7.1328-5.1797l1.1445-21.84c0.082031-1.5547-0.41406-3.0898-1.3984-4.3008l-13.766-16.996c-2.3945-2.957-0.95312-7.3984 2.7227-8.3828l21.125-5.6602c1.5039-0.40234 2.8086-1.3516 3.6562-2.6562l11.91-18.344c2.0703-3.1914 6.7422-3.1914 8.8164 0l11.91 18.344c0.84766 1.3086 2.1523 2.2539 3.6562 2.6562l21.125 5.6602c3.6758 0.98438 5.1172 5.4258 2.7227 8.3828z"/>
                        </svg>
                    </div>
                    <div class="left-options" style="display: none;">
                        <img class="term-img-btn" src="/assets/Images.svg">
                        <img class="answer-img-btn" src="/assets/Images.svg">
                        <img class="add-multi-btn" src="/assets/multi.svg">
                        <img class="notes-btn" src="/assets/Notes.svg">
                        <img class="delete-btn" src="/assets/closeCircle.svg">
                    </div>
                </div>
                <p class="term-warning" style="display: none"></p>
            </div>
            <div class="term-container comment-container" style="display: none;">
                <textarea class="comment" readonly></textarea>
            </div>
        </div>
        `
        this.isMultiHead = false;
        this.isMulti = false;
        this.parentId = null;
        this.hasNote = false;
        this.obj = htmlToObj(html_data);

        this.obj.querySelectorAll("textarea").forEach(textarea => {
            textarea.addEventListener("input", () => { textarea_resize(textarea) })
        })

        this.id = id;
        this.multiChildren = [];
        TermComponent.termMap[id] = this;

        this.hasTermImage = false;
        this.hasAnswerImage = false;

        this.updateImageDisplay();

        this.isBeingDragged = false;
    }

    enableTextAreaEditing() {
        this.obj.querySelectorAll("textarea").forEach(textarea => {
            textarea.removeAttribute("readonly");
        })
    }


    enableEditing() {
        this.obj.querySelector(".star").remove();
        this.obj.querySelector(".left-options").style.display = "flex";
        this.obj.querySelectorAll("textarea").forEach(textarea => {
            textarea.removeAttribute("readonly");
            textarea.style.borderBottom = "2px solid white";
            textarea.style.transition = "border-bottom 0.25s";
        })

        let dragHandle = this.obj.querySelector("#drag-handle")
        dragHandle.style.display = "inline-block";
    }

    addDragBeginHandler(callback) {
        let dragHandle = this.obj.querySelector("#drag-handle")
        dragHandle.addEventListener("mousedown", (event) => {
            this.isBeingDragged = true;
            TermComponent.draggedTerm = this;
            callback(event, this);
        })
    }

    makeMulti(parentId) {
        this.obj.classList.add("multi");
        this.obj.setAttribute("data-parent-id", parentId);

        this.obj.querySelector(".term-img-btn").style.display = "none";
        this.obj.querySelector(".add-multi-btn").style.display = "none";

        // hide the drag handle
        this.obj.querySelector("#drag-handle").style.display = "none";

        this.isMulti = true;
        this.parentId = parentId;
    }

    promoteMultiChildren() {
        this.multiChildren.forEach(child => {
            this.obj.after(child.getObj());

            child.obj.classList.remove("multi");
            child.obj.removeAttribute("data-parent-id");
            
            child.obj.querySelector(".term-img-btn").style.display = "unset";
            child.obj.querySelector(".add-multi-btn").style.display = "unset";

            child.isMulti = false;
        })
    }

    setWarning(warning) {
        console.log("Setting warning: " + warning)
        let warningElem = this.obj.querySelector(".term-warning");
        if (warning == null || warning == "") {
            warningElem.style.display = "none";
            warningElem.textContent = "";
        } else {
            warningElem.style.display = "block";
            warningElem.textContent = warning;
        }
    }

    makeMultiHead(child) {
        console.log(child)
        this.multiChildren.push(child);
        this.obj.appendChild(child.getObj());
        console.log("Making multi head for term " + this.id + " with child " + child.id);

        if (this.isMultiHead) {
            return;
        }
        this.isMultiHead = true;
        
        this.obj.querySelector(".definition").style.display = "none";
        this.obj.querySelector(".answer-img-btn").style.display = "none";
    }

    getChildren() {
        return this.multiChildren;
    }

    addDeleteCallback(callback) { this.obj.querySelector(".delete-btn").addEventListener("click", callback); }
    addMultiCallback(callback) { this.obj.querySelector(".add-multi-btn").addEventListener("click", callback); }
    addNoteCallback(callback) { this.obj.querySelector(".notes-btn").addEventListener("click", callback); }

    addStarCallback(callback) { 
        this.obj.querySelector('.star').style.display = "block";
        this.obj.querySelector(".star").addEventListener("click", callback); 
    }
    
    addImageCallback(callback) {
        this.obj.querySelector(".term-img-btn").addEventListener("click", () => { callback("term") });
        this.obj.querySelector(".answer-img-btn").addEventListener("click", () => { callback("answer") });
    }

    addImageClickCallback(callback) {
        this.obj.querySelector(".image-term").addEventListener("click", () => { callback("term") });
        this.obj.querySelector(".image-answer").addEventListener("click", () => { callback("answer") });
        this.obj.querySelector(".image-term").classList.add("clickable-image");
        this.obj.querySelector(".image-answer").classList.add("clickable-image");
    }

    addTermCallbacks(onFocusIn, onFocusOut, onChange) {
        let term = this.obj.querySelector(".term");        

        term.addEventListener("focusin", onFocusIn);
        term.addEventListener("focusout", onFocusOut);
        term.addEventListener("input", onChange);
    }

    addAnswerCallbacks(onFocusIn, onFocusOut, onChange) {
        let answer = this.obj.querySelector(".definition");
        if (answer != null) {
            answer.addEventListener("focusin", onFocusIn);
            answer.addEventListener("focusout", onFocusOut);
            answer.addEventListener("input", onChange);
        }
    }

    addNoteCallbacks(onFocusIn, onFocusOut, onChange) {
        let note = this.obj.querySelector(".comment");
        if (note != null) {
            note.addEventListener("focusin", onFocusIn);
            note.addEventListener("focusout", onFocusOut);
            note.addEventListener("input", onChange);
        }
    }

    applyTextAreaResize() {
        this.obj.querySelectorAll("textarea").forEach(textarea => {
            textarea_resize(textarea)
        })
    }

    setTerm(text) {
        let termTextArea = this.obj.querySelector(".term");
        termTextArea.value = text;
        textarea_resize(termTextArea);
    }

    setAnswer(text) {
        let answerTextArea = this.obj.querySelector(".definition");
        answerTextArea.value = text;
        textarea_resize(answerTextArea);
    }

    noteIsVisible() {
        let noteContainer = this.obj.querySelector(".comment-container");
        return noteContainer.style.display != "none";
    }

    setNoteVisibile(visible) {
        let noteContainer = this.obj.querySelector(".comment-container");
        let commentTextArea = this.obj.querySelector(".comment");
        let displayType = "none"
        if (visible) {
            displayType = "flex"
        }
        noteContainer.style.display = displayType;
        textarea_resize(commentTextArea)
        // commentTextArea.value = ""


    }

    setDisabled(toggle) {
        // hide all children that don't have the term-component class (set their opacty to 0.5)
        if (toggle) {
            for (let child of this.obj.children) {
                if (!child.classList.contains("term-component")) {
                    child.style.opacity = "0.5";
                }
            }
        } else {
            for (let child of this.obj.children) {
                if (!child.classList.contains("term-component")) {
                    child.style.opacity = "1.0";
                }
            }
        }

    }

    setNote(text) {
        let noteTextArea = this.obj.querySelector(".comment");
        noteTextArea.value = text;
        textarea_resize(noteTextArea);
    }

    setTermImage(imageId) {
        if (imageId == null || imageId == "") {
            this.hasTermImage = false;
        } else {
            this.hasTermImage = true;
            let img = this.obj.querySelector(".image-term");
            img.src = imageUrlForId(imageId);
        }
        this.updateImageDisplay();
    }

    setAnswerImage(imageId) {
        if (imageId == null || imageId == "") {
            this.hasAnswerImage = false;
        } else {
            this.hasAnswerImage = true;
            let img = this.obj.querySelector(".image-answer");
            img.src = imageUrlForId(imageId);
        }
        this.updateImageDisplay();
    }

    updateImageDisplay() {
        if (!this.hasTermImage && !this.hasAnswerImage) {
            this.obj.querySelector(".image-container").style.display = "none";
        } else {
            this.obj.querySelector(".image-container").style.display = "flex";
        }

        if (this.hasTermImage) {
            this.obj.querySelector(".image-term").style.display = "block";
        } else {
            this.obj.querySelector(".image-term").style.display = "none";
        }

        if (this.hasAnswerImage) {
            this.obj.querySelector(".image-answer").style.display = "block";
        } else {
            this.obj.querySelector(".image-answer").style.display = "none";
        }
    }

    getTerm() {
        return this.obj.querySelector(".term").value;
    }

    getAnswer() {
        let answer = this.obj.querySelector(".definition");
        if (answer != null) {
            return answer.value;
        }
        return null;
    }

    getNote() {
        return this.obj.querySelector(".comment").value;
    }

    getObj() {
        return this.obj;
    }
    
    toggleStar() {
        let starElem = this.obj.querySelector('.star');
        if (starElem.classList.contains("selected")) {
            starElem.classList.remove("selected");
        } else {
            starElem.classList.add("selected");
        }
    }

    lockField(field) {
        let textArea = this.getFieldTextArea(field);
        textArea.setAttribute("readonly", "");
        textArea.style.opacity = "0.5";
    }

    unlockField(field) {
        let textArea = this.getFieldTextArea(field);
        textArea.removeAttribute("readonly");
        textArea.style.opacity = "1.0";
    }
    
    getFieldTextArea(field) {
        if (field == "term") {
            return this.obj.querySelector(".term");
        } else if (field == "answer") {
            return this.obj.querySelector(".definition");
        } else if (field == "note") {
            return this.obj.querySelector(".comment");
        }
        return null;
    }

    setAnswerBlurred(toggle) {
        let answer = this.obj.querySelector(".definition");
        // answer.classList.toggle("blurred-answer");
        if (toggle) {
            answer.classList.add("blurred-answer");
        } else {
            answer.classList.remove("blurred-answer");
        }
    }
}



const originalAppend = Element.prototype.append;

Element.prototype.append = function (...args) {
    originalAppend.apply(this, args);

    args[0].querySelectorAll("textarea").forEach(textarea => {
        textarea_resize(textarea)
    })
};


function textarea_resize(area){
    area.style.height = "0";
    area.style.height = (area.scrollHeight + window.getComputedStyle(area).borderBottomWidth.replace("px", "") * 1) + "px";
    if (area.parentNode.className.includes("term-container")) {
        let textareas = area.parentNode.querySelectorAll("textarea")
        let tallestHeight = 0;
        textareas.forEach(textarea => {
            let height = textarea.style.height.replace("px", "") * 1;
            if (height > tallestHeight) {
                tallestHeight = height;
            }
        });
        textareas.forEach(textarea => {
            textarea.style.height = tallestHeight + "px";
        });
    }
}

async function getFileFromPicker(type) {
    return new Promise((resolve) => {
        const input = document.createElement("input");
        input.accept = type
        input.type = "file";
        input.onchange = () => resolve(input.files[0] || null);
        input.click();
    });
}