let txtBox = document.querySelector('.txtBox')
txtBox.focus()
let letterCloseButton = document.querySelector('.letter-close-button')

let startsWith = document.getElementById("startsWith");
let mustInclude = document.getElementById("mustInclude");
let endsWith = document.getElementById("endsWith");
let exculdeWith = document.getElementById("exculdeWith");
let inculdeWith = document.getElementById("inculdeWith");
let wordLength = document.getElementById("wordLength");

// // when typing on input
txtBox.addEventListener('input', (e) => {
    if (e.target.value === "") {
        letterCloseButton.style.display = "none"
    }
    else {
        letterCloseButton.style.display = "block"
    }
    e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "")
    let rangeOfBlankTile = 3
    if (rangeOfBlankTile === "") {
        rangeOfBlankTile = 3
    }
    e.target.value = e.target.value.replace(/ /g, '?')
    let data = []
    data = e.target.value.split('').filter((i) => i === '?')
    if (data.length > rangeOfBlankTile) {
        e.target.value = e.target.value.replace(/\?$/, '')
    }
})
letterCloseButton.addEventListener("click", () => {
    txtBox.value = ""
    letterCloseButton.style.display = "none"
})
//tooltips for advanced filter
const filterInputs = document.querySelectorAll('.filter_val');
Array.from(filterInputs).forEach((item) => {
    item.addEventListener("input", (e) => {
        const inputValue = e.target.value;
        const parentElement = e.target.parentElement;
        const imgElement = parentElement.querySelector('img');
        const tooltipElement = parentElement.querySelector('.filter-tooltip');

        if (inputValue == "") {
            imgElement.src = "/assets/images/questionmark.svg"
            setTimeout(() => {
                item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
            }, 100);
            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');

        } else {
            item.nextElementSibling.removeAttribute("data-tip")
            imgElement.src = "/assets/images/close-btn.svg"
            tooltipElement.style.setProperty('--tooltip-padding', '0');
            tooltipElement.style.setProperty('--tooltip-border-style', 'none');
        }
        item.nextElementSibling.addEventListener("click", () => {
            e.target.value = ""
            imgElement.src = "/assets/images/questionmark.svg"
            setTimeout(() => {
                item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
            }, 100);
            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
        })
    })
})
const loadResource = (FILE_URL, async = true, type = "text/javascript") => {
    return new Promise((resolve, reject) => {
        let resourceEle;

        if (type === "text/javascript") {
            resourceEle = document.createElement("script");
        } else if (type === "text/css") {
            resourceEle = document.createElement("link");
            resourceEle.rel = "stylesheet";
        } else {
            reject({
                status: false,
                message: `Unsupported resource type: ${type}`,
            });
            return;
        }

        resourceEle.type = type;
        resourceEle.async = async;
        resourceEle.href = FILE_URL;


        resourceEle.addEventListener("load", () => {
            resolve({ status: true });
        });

        resourceEle.addEventListener("error", () => {
            reject({
                status: false,
                message: `Failed to load the resource ${FILE_URL}`,
            });
        });

        if (type === "text/javascript") {
            document.body.appendChild(resourceEle);
        } else if (type === "text/css") {
            document.head.appendChild(resourceEle);
        }
    });
};
const formElement = document.querySelector("#form");
formElement.addEventListener("submit", function (e) {
    e.preventDefault();

    document.querySelector(".fillterWrapper").classList.add("hide")
    let selectedDictionary = document.querySelector(".select_dropDown2").value;
    if (history.pushState) {
        var newurl =
            window.location.protocol +
            "//" +
            window.location.host +
            window.location.pathname +
            "?" +
            "search" +
            "=" +
            txtBox.value.toLowerCase() +
            "&" +
            "dictionary" +
            "=" +
            selectedDictionary +
            "&" +
            "prefix" +
            "=" +
            startsWith.value +
            "&" +
            "contains" +
            "=" +
            mustInclude.value +
            "&" +
            "suffix" +
            "=" +
            endsWith.value +
            "&" +
            "exclude" +
            "=" +
            exculdeWith.value +
            "&" +
            "include" +
            "=" +
            inculdeWith.value +
            "&" +
            "length" +
            "=" +
            wordLength.value;
        window.history.pushState({ path: newurl }, "", newurl);

        const params = new URLSearchParams(window.location.search);
        serachValue = params.get("search");
        prefixValue = params.get("prefix");
        containsValue = params.get("contains");
        suffixValue = params.get("suffix");
        exculdeValue = params.get("exclude");
        includeValue = params.get("include");
        lengthValue = params.get("length");
        dictonary = params.get("dictionary");

        gtag("event", "page_view", {
            page_location: window.location.pathname + location.search,
        });
    }

    const paramName = 'search';
    if (new URLSearchParams(window.location.search).has(paramName)) {
        loadResource("/assets/css/wordfinder-result.css", true, "text/css")
            .then((data) => {
                console.log("CSS loaded:", data);
                // Once the CSS is loaded, create the script element for JavaScript
                const jsScript = document.createElement("script");
                jsScript.src = "/assets/js/xletter-result.js";
                jsScript.onload = () => {
                    getData(txtBox.value.toLowerCase());
                };
                document.body.appendChild(jsScript);
            })
            .catch((error) => {
                console.error("Error loading resource:", error);
            });
    }
});

// Now you can use the loadScript function with additional data
function checkQueryParam() {
    const urlParams = new URLSearchParams(window.location.search);
    const paramName = 'search';
    if (urlParams.has(paramName)) {
        loadResource("/assets/css/wordfinder-result.css", true, "text/css")
            .then((data) => {
                console.log("CSS loaded:", data);
                // Once the CSS is loaded, create the script element for JavaScript
                const jsScript = document.createElement("script");
                jsScript.src = "/assets/js/xletter-result.js";
                jsScript.onload = () => {
                    console.log("JS loaded");
                    getData(txtBox.value.toLowerCase());
                };
                document.body.appendChild(jsScript);
            })
            .catch((error) => {
                console.error("Error loading resource:", error);
            });
    }
}
checkQueryParam();