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 fillElemSmoothly(container, children, rate=50) {


    // add them all at once
    for (let i = 0; i < children.length; i++) {
        container.append(children[i]);
    }

    // window.addEventListener('scroll', function() {
    //     for (let i = 0; i < children.length; i++) {
    //         if (children[i].style.opacity == 1) {
    //             continue;
    //         }
    //         let rect = children[i].getBoundingClientRect();
    //         if (rect.top < window.innerHeight && rect.bottom > 0) {
    //             children[i].style.opacity = 1;
    //             children[i].style.transform = 'translateX(0)';
    //         }
            
    //     }
    // });

    // for (let i = 0; i < children.length; i++) {
    //     children[i].style.opacity = 0;
    //     children[i].style.transform = 'translateX(-30px)';
    //     container.append(children[i]);
    // }

    // for (let i = 0; i < children.length; i++) {
    //     setTimeout(() => {
    //         children[i].style.opacity = 1;
    //         children[i].style.transform = 'translateX(0)';
    //     }, i * rate);
    // }
}

function blurOutPage() {
    document.body.style.transition = 'opacity 0.25s ease';
    document.body.style.opacity = 0;
}

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

function openPage(mode_name) {
    blurOutPage();
    setTimeout(() => {
        window.location.href = `./${mode_name}`
    }, 250);
    setTimeout(() => {
        blurInPage();
    }, 500);
}

function flatten_studysheet(studysheet, swapped=false, starsIdList=[]) {
    console.log("Flattening")
    console.log(swapped)
    let flattened_studysheet = structuredClone(studysheet)
    let returned_studysheet = []
    console.log(flattened_studysheet)
    for (let group of flattened_studysheet){
        for (let term of group.subterms){
            if (term.subterms != null){
                for (let subterm of term.subterms){
                    // subterm.term = term.term + " - " + subterm.term
                    subterm.category = term.term
                    subterm.category_id = term.id
                    if (swapped){
                        [subterm.term, subterm.answer] = [subterm.answer, subterm.term]
                    }

                    let idPath = group.id + "." + term.id + "." + subterm.id
                    if (starsIdList.length > 0 && !starsIdList.includes(idPath)){
                        continue;
                    }
                    subterm.idPath = idPath

                    returned_studysheet.push(subterm)
                }
            } else {
                if (swapped){
                    [term.term, term.answer] = [term.answer, term.term]
                }
                let idPath = group.id + "." + term.id
                if (starsIdList.length > 0 && !starsIdList.includes(idPath)){
                    continue;
                }
                term.idPath = idPath
                returned_studysheet.push(term)
            }
            
        }
    }
    return returned_studysheet;
}

function populateStudysheetPage(container, studysheet_content, showStars=false) {
    flattened_sheet = flatten_studysheet(studysheet_content)
    if (Object.keys(flattened_sheet).length == 0) {
        let empty = document.createElement('div');
        empty.innerHTML = 'This studysheet is empty';

        container.style.position = 'relative';

        empty.style.position = 'absolute';
        empty.style.top = '0'
        empty.style.left = '0'
        empty.style.right = '0'
        empty.style.bottom = '0'
        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.backgroundColor = 'var(--frosted-glass)';

        container.append(empty);
        return;
    }

    let elems = []

    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 has_notes = subgroup[j].notes != null
            let has_image = subgroup[j]["image-term"] != null || subgroup[j]["image-answer"] != null

            if (has_image){
                let imageContainer = buildImageContainer(studysheet_content[i].id + "." + subgroup[j].id, subgroup[j]["image-term"], subgroup[j]["image-answer"], false);
                elems.push(imageContainer)
            }

            let is_multi_head = subgroup[j].subterms != null
            let id = studysheet_content[i].id + "." + subgroup[j].id
            let term = buildTerm(id, subgroup[j].term, subgroup[j].answer, false, is_multi_head, has_notes, false, (showStars && !is_multi_head))
            elems.push(term)

            if (has_notes) {
                let comment = buildNote(id, false, subgroup[j].notes, false);
                elems.push(comment)
            }
            
            if (is_multi_head){ // is a multi
                for (let k = 0; k<subgroup[j].subterms.length; k++){
                    console.log("chat is this multi")
                    let has_notes = subgroup[j].subterms[k].notes != null
                    let id = studysheet_content[i].id + "." + subgroup[j].id +"."+ subgroup[j].subterms[k].id
                    term = buildTerm(id, subgroup[j].subterms[k].term, subgroup[j].subterms[k].answer, true, false, has_notes, false, showStars)
                    elems.push(term)

                    if (has_notes) {
                        let comment = buildNote(id, true, subgroup[j].subterms[k].notes, false);
                        elems.push(comment)
                    }
                }
                
            }
        }
    }
    fillElemSmoothly(container, elems, 25)
}

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

function handleSheetList(container, sheet_list) {
    let sheetElems = []
    for (let i = 0; i<sheet_list.length; i++){
        console.log(sheet_list[i])
        if (sheet_list[i].studysheet_id == null){ //cause in studysheet table its called id and in library its studysheet_id (of course)
            sheet_list[i].studysheet_id = sheet_list[i].id
        }
        let obj = create_studysheet_entry(sheet_list[i].name, sheet_list[i].owner_name, sheet_list[i].length, sheet_list[i].created, sheet_list[i].modified, sheet_list[i].studysheet_id, sheet_list[i].owner_id, (sheet_list[i].public==0))
        sheetElems.push(obj)
    }
    fillElemSmoothly(container, sheetElems)
}