import { h } from "../jsx.ts";
import watt, { watt as originalWatt } from "../wattpad.ts";
import Base from "../templates/Base.tsx";

import Script from "../components/Script.tsx";
import FavoriteSearchButtonScript from "../scripts/FavoriteSearch.ts";

function search() {
    console.log(document.getElementById("query"));
}

export default async (params: URLSearchParams) => {
    const res = [];
    if (params.get("query") && params.get("type")) {
        const search = originalWatt.search({
            query:
                params.get("type") === "tag"
                    ? (params.get("query") as string).split(",")
                    : (params.get("query") as string),
            type: params.get("type") as "text" | "title" | "tag", //cannot go wrong, will not go wrong, has never gone wrong
            limit: 20,
            sort: (params.get("sort") as string) ?? "hot" // migration trol
        });
        await search.update(Number(params.get("page") ?? 0));
        for (let i = 0; i < search.results.length; i++) {
            const rizz = await watt.getStory(search.results[i].id, false);
            res.push(
                <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>
            );
        }
    }
    return (
        <Base
            title="Search"
            description="The homepage."
            stylepath="css/index.scss"
        >
            <Script function={FavoriteSearchButtonScript} />
            <h1>Search</h1>
            {/* TODO: impl autocomplete for tags? */}
            <form method="GET" class="search-form">
                <div>
                    <input
                        id="query"
                        type="text"
                        name="query"
                        placeholder="Query"
                        style="margin-top: 0.5em;"
                        value={
                            params.get("query")?.replaceAll('"', "&quot;") ?? ""
                        }
                        autocomplete="off"
                    />
                    <div>
                        <input
                            type="radio"
                            id="normal"
                            name="type"
                            value="text"
                            checked={
                                params.get("type") === "text" ||
                                !params.get("type")
                            }
                        />
                        <label for="id">Text search</label>
                        <input
                            type="radio"
                            id="title"
                            name="type"
                            value="title"
                            checked={params.get("type") === "title"}
                        />
                        <label for="title">Title search</label>
                        <input
                            type="radio"
                            id="tag"
                            name="type"
                            value="tag"
                            checked={params.get("type") === "tag"}
                        />
                        <label for="tag">Tag search</label>
                        <select name="sort" id="sort">
                            <option
                                value="hot"
                                selected={params.get("sort") === "hot"}
                            >
                                Hot
                            </option>
                            <option
                                value="new"
                                selected={params.get("sort") === "new"}
                            >
                                New
                            </option>
                        </select>
                    </div>
                </div>
                <div style="flex-direction: row !important;">
                    <input
                        style="margin-top:0.25em;"
                        type="submit"
                        value="Submit"
                    />
                    {params.get("query") && params.get("type") ? (
                        <button
                            type="button"
                            style="margin-left:0.5em;margin-top:0.25em;border-radius: 0.25em;"
                            id="favorite"
                        >
                            Favorite
                        </button>
                    ) : undefined}
                </div>
            </form>

            <div id="stories" class="stories">
                {res.join("")}
                <div class="pagenav">
                    {Number(params.get("page") ?? 0) === 0 ? undefined : (
                        <a
                            href={(() => {
                                // total and utter jank
                                params.set(
                                    "page",
                                    (Number(params.get("page")) - 1).toString()
                                );
                                const strParams = params.toString();
                                params.set(
                                    "page",
                                    (Number(params.get("page")) + 1).toString()
                                );
                                return "/search?" + strParams.toString();
                            })()}
                        >
                            &lt;
                        </a>
                    )}
                    {params.get("query") && params.get("type") ? (
                        <div>&nbsp;|&nbsp;</div>
                    ) : undefined}
                    {res.length !== 20 &&
                    (res.length as number) !== 19 ? undefined : (
                        <a
                            href={(() => {
                                const tmpParams = params;
                                tmpParams.set(
                                    "page",
                                    (Number(params.get("page")) + 1).toString()
                                );
                                return "/search?" + tmpParams.toString();
                            })()}
                        >
                            &gt;
                        </a>
                    )}
                </div>
            </div>
        </Base>
    );
};