import { h } from "../jsx.ts";
import watt, { Story, watt as originalWatt } from "../wattpad.ts";
import wattpad, { User } from "../wattpad.ts";
import { Context } from "../oak.ts";

import Base from "../templates/Base.tsx";

import FourOhFour from "./404.tsx";

export default async (params: URLSearchParams, ctx: Context) => {
    const name = params.get("name");
    const chapterNumber = Number(params.get("page")) ?? 0;
    if (!name) {
        throw "deez";
    }

    const user = new User(originalWatt.session, name);
    try {
        await user.init();
        await user.updateStories(chapterNumber);
    } catch {
        return FourOhFour(undefined, ctx);
    }

    const res: Story[] = [];

    for (let i = 0; i < user.stories.length; i++) {
        const rizz = await watt.getStory(user.stories[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={user.displayName as string}
            description={user.description as string}
            stylepath="css/index.scss"
        >
            <div style="display:flex;align-items:center;justify-content:center;flex-direction:column;">
                <div class="userprofile">
                    <div>
                        <img id="storycover" src={user.userJSON.avatar} />
                        <div>
                            <h3 id="storyname">
                                {user.displayName === ""
                                    ? user.username
                                    : user.displayName}
                            </h3>
                            {user.displayName === ""
                                ? undefined
                                : user.username}
                            <div style="margin-top: 1em;" />
                            Followers: {user.userJSON.numFollowers ?? 0}
                            <br />
                            Following: {user.userJSON.numFollowing ?? 0}
                            <form
                                action={`https://wattpad.com/user/${user.username}`}
                            >
                                <button
                                    type="submit"
                                    id="wattpad-view"
                                    class="favorite-story-button"
                                    style="margin-left: 0.75em;"
                                >
                                    View on Wattpad
                                </button>
                            </form>
                        </div>
                    </div>
                    <p>
                        {user.description
                            ? user.description.replaceAll("\n", "<br>")
                            : undefined}
                    </p>
                </div>
            </div>

            <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 (
                                    `/user?name=${user.username}&` +
                                    strParams.toString()
                                );
                            })()}
                        >
                            &lt;
                        </a>
                    )}
                    <div>&nbsp;|&nbsp;</div>
                    {res.length !== 20 &&
                    (res.length as number) !== 19 ? undefined : (
                        <a
                            href={(() => {
                                const tmpParams = params;
                                tmpParams.set(
                                    "page",
                                    (Number(params.get("page")) + 1).toString()
                                );
                                return (
                                    `/user?name=${user.username}&` +
                                    tmpParams.toString()
                                );
                            })()}
                        >
                            &gt;
                        </a>
                    )}
                </div>
            </div>
        </Base>
    );
};