import { h } from "../jsx.ts";
import watt, { watt as originalWatt } from "../wattpad.ts";
import { 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");
    if (!name) {
        throw "deez";
    }

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

    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>
                    </div>
                    <p>
                        {user.description
                            ? user.description.replaceAll("\n", "<br>")
                            : undefined}
                    </p>
                </div>
            </div>
        </Base>
    );
};