let json = null;

let searchDictionary = {};

let header = null;
let main = null;

function animateHeader(inout = false) {
    //todo: debounce this
    if (inout) {
        header.classList.add("header-animation-reverse");
        header.classList.remove("header-animation");
        main.classList.add("main-animation-reverse");
        setTimeout(() => {
            header.classList.add("fullscreen");
            main.style.opacity = "0";
            main.classList.remove("main-animation-reverse");
        }, 500);
        setTimeout(() => {
            header.classList.remove("header-animation-reverse");
        }, 1000);
    } else {
        header.classList.add("header-animation");
        header.classList.remove("header-animation-reverse");
        setTimeout(() => {
            header.classList.remove("fullscreen");
            main.classList.add("main-animation");
        }, 500);
        setTimeout(() => {
            header.classList.remove("header-animation");
            main.style.opacity = "1";
            main.classList.remove("main-animation");
        }, 1000);
    }
    //somewhere here we animate in the actual page too, but it.. doesnt exist yet
}

// on space animateHeader()
document.addEventListener("keydown", (e) => {
    //on / key press
    if (e.keyCode === 191) {
        e.preventDefault();
        header.querySelector("input").focus();
    }
    if (e.keyCode === 27) {
        //if search box not focused, and if we're not on the home page, go back to home page
        if (!header.querySelector("input").matches(":focus") && !header.classList.contains("fullscreen")) {
            e.preventDefault();
            animateHeader(true);
        }
    }
    if (e.keyCode === 13) {
        if (header.querySelector("input").matches(":focus")) {
            //search
            e.preventDefault();
            if (header.classList.contains("fullscreen")) {
                animateHeader();
            }
            doSearch();
        }
    }
});

function stripWord(word) {
    return word.replace(/[^a-zA-Z]/g, "");
}

heonianVowels = {
    "-1": "",
    "0": "",
    "1": "a",
    "2": "e",
    "3": "i",
    "4": "o",
    "5": "u",
    "a": "a",
    "b": "e",
    "c": "i",
    "d": "o",
    "e": "u"
}

heonianVowelsSeparate = {
    "0": "a",
    "1": "e",
    "2": "i",
    "3": "o",
    "4": "u",
    "a": "a",
    "b": "e",
    "c": "i",
    "d": "o",
    "e": "u"
}

heonianConsonants = {
    "00": "",
    "01": "g",
    "02": "sh",
    "03": "r",
    "04": "ny",
    "05": "ch",
    "06": "m",
    "07": "j",
    "07": "y",
    "08": "f",
    "09": "t",
    "0a": "k",
    "0b": "w",
    "0c": "l",
    "0d": "p",
    "0e": "b",
    "0f": "d",
    "10": "h",
};

function heonianToRoman(text) {
    let roman = "";
    for (let i = 0; i < text.length; i++) {
        let h = text.codePointAt(i);
        if (h >= 57344 && h <= 57606) {
            h = text.codePointAt(i).toString(16).split("");
            if (h[1] == 0 && h[2] == 0) {
                roman += heonianVowelsSeparate[h[3]];
            } else {
                roman += heonianConsonants[h[1] + "" + h[2]] + heonianVowels[h[3] - 1];
            }
        } else {
            roman += text.charAt(i);
        }
    }
    return roman;
}

function loadDictionary() {
    fetch("./wordlist.json").then((e) => {
        if (e.status === 200) {
            //convert to json lmao
            e.json().then((e) => {
                json = e;

                let values = Object.values(json);
                let keys = Object.keys(json);
                //prepare search. maybe async this if we're loading a specific word?
                for (let i = 0; i < keys.length; i++) {
                    //create array
                    searchDictionary[keys[i]] = [];

                    //add: word
                    searchDictionary[keys[i]].push(keys[i]);

                    //add: romanized word
                    searchDictionary[keys[i]].push(heonianToRoman(keys[i]));

                    //add: translations, meanings
                    for (let o = 0; o < values[i].length; o++) {
                        searchDictionary[keys[i]].push(values[i][o]["meaning"]);
                        searchDictionary[keys[i]].push(values[i][o]["translation"]);
                    }
                }

                //ok, we're all ready!
                document.querySelector("header input").placeholder = "search";
            });
        } else {
            alert("yeah something went horribly wrong loading the wordlist so uh,,, certified ike moment");
            return;
        }
    });
}

function search(word) {
    word = stripWord(word);
    let result = [];
    for (let key in searchDictionary) {
        for (let value in searchDictionary[key]) {
            if (searchDictionary[key][value].includes(word)) {
                result.push(key);
                break; //????
            }
        }
    }
    return result;
}

function doSearch() {
    let results = search(header.querySelector("input").value);
    if (results.length == 0) {
        main.innerHTML = "no results lulw";
    } else {
        main.innerHTML = "";
        /*
        [words - 420 found / expressions - 69 found / wahtever else - ygettheidea] (click one to filter to just those)
        */
        for (let i = 0; i < results.length; i++) {
            let div = document.createElement("div");

            // 1. add word in heo + romanized ruby as header
            let header = document.createElement("ruby");
            header.classList.add("result-header");
            header.innerHTML = results[i] + " <rt>" + heonianToRoman(results[i]) + "</rt>";

            // 2. add tags [tags like. common word, slang, formal???, type, etc]

            // 3. formal/nonformal versions, inflections button

            // 4. audio clip if found

            // 5. render all meanings of word
            /*
                short english translation, followed by . long description/explanation of word
                maybe an example? usage?
                and. source/who made it/etc
                repeat for all meanings of word,
            */
            div.appendChild(header);
            for (let o = 0; o < json[results[i]].length; o++) {
                let div2 = document.createElement("div");
                div2.classList.add("result-meaning");
                div2.innerHTML = json[results[i]][o]["meaning"];
                div.appendChild(div2); //y, yeah.
            }
            main.appendChild(div);
        }
    }
}

window.onload = () => {
    header = document.querySelector("header");
    main = document.querySelector("main");
    loadDictionary();
}