window.onload = () => {
    // Sync to position button
    const position = localStorage.getItem(
        new URL(document.URL).searchParams.get("id") + "_progress"
    );

    if (position) {
        const buttonsList = document.getElementById("detail-buttons");

        const buttonEle = document.createElement("button");
        buttonEle.className = "favorite-story-button";
        buttonEle.textContent = "Sync to story position";
        buttonEle.onclick = () => {
            const currURL = new URL(document.location.href);
            currURL.searchParams.set("chapter", position);
            window.location.href = currURL.toString();
        };
        buttonsList?.appendChild(buttonEle);
    }

    // Favorite button
    const button = document.getElementById("favorite");

    if (!button) throw "how did your button not init what";

    let savedStories = JSON.parse(localStorage.getItem("savedStories") ?? "[]");

    function handler() {
        if (button?.textContent === "Save Story") {
            savedStories.push({
                id: new URL(document.URL).searchParams.get("id"),
                name: document.getElementById("storyname")?.textContent,
                coverURL: document.getElementById("storycover").src
            });
            button.textContent = "Unsave Story";
        } else if (button?.textContent === "Unsave Story") {
            savedStories = savedStories.filter(
                (story) =>
                    story.id !== new URL(document.URL).searchParams.get("id")
            );
            button.textContent = "Save Story";
        }
        localStorage.setItem("savedStories", JSON.stringify(savedStories));
    }

    if (
        savedStories.filter(
            (story) => story.id === new URL(document.URL).searchParams.get("id")
        ).length > 0
    ) {
        button.textContent = "Unsave Story";
    }

    button.onclick = handler;
};