/* <a href={"/story?id=" + rizz.id} class="story">
<img src={rizz.storyJSON.cover} />
<div>
    <h3>{rizz.name}</h3>
    <p>{rizz.storyJSON.description}</p>
</div>
</a> */

export default () => {
    // deno-lint-ignore ban-types
    const oldOnloadHandler: Function = window.onload ?? (() => {});

    async function historyLoad() {
        const historyDiv = document.getElementById("stories")!;
        historyDiv.textContent = "";

        const readingHistory: string[] = JSON.parse(
            localStorage.getItem("readingHistory") ?? "[]",
        );

        for (let i = 0; i < readingHistory.length; i++) {
            // deno-lint-ignore no-explicit-any
            const story: Record<string, any> = await (await fetch(
                document.location.origin +
                    `/api/getStory?id=${readingHistory[i]}`,
            )).json();

            const searchEle = document.createElement("a");
            searchEle.className = "story";
            searchEle.href = "/story?id=" + story.id +
                (localStorage.getItem(`${story.id}_progress`)
                    ? `&chapter=${localStorage.getItem(`${story.id}_progress`)}`
                    : "");
            const coverEle = document.createElement("img");
            coverEle.src = story.storyJSON.cover;
            const div = document.createElement("div");
            const titleEle = document.createElement("h3");
            titleEle.textContent = story.name;
            div.appendChild(titleEle);
            const descEle = document.createElement("p");
            descEle.innerHTML = story.storyJSON.description;
            div.appendChild(descEle);
            searchEle.appendChild(coverEle);
            searchEle.appendChild(div);
            historyDiv?.appendChild(searchEle);
        }
    }

    window.onload = async () => {
        oldOnloadHandler();

        // render history
        await historyLoad();

        // clear history button
        const button = document.getElementById("clear-button")!;

        button.onclick = async () => {
            localStorage.removeItem("readingHistory");
            // rerender history
            await historyLoad();
        };
    };
};