import { ComponentChildren } from "preact";
import { Main, mk_class_wrapper, render_and_copy } from "./common.tsx";

// i heard you liked posts, so i put a post in your post so you can post while you post
const ReblogIcon = () => (
    <img
        src="https://static.pyrope.net/cohost-reblog.png"
        alt="the cohost reblog icon"
        class="reblog"
    />
);

const LikeIcon = () => (
    <img
        src="https://static.pyrope.net/cohost-like.png"
        alt="the cohost like icon"
        class="like"
    />
);

const OptionsIcon = () => (
    <img
        src="https://static.pyrope.net/cohost-post-options.png"
        alt="the cohost icon for post options"
        class="options"
    />
);

const Bottom = ({ n_comments }: { n_comments: number }) => (
    <div class="bottom">
        <div class="bottom-inner">
            <a
                class="comments"
                href="https://413.gay"
            >{`${n_comments} comments`}</a>
            <div class="interactions">
                <ReblogIcon />
                <LikeIcon />
            </div>
        </div>
    </div>
);

const Content = ({
    children,
    id,
}: {
    children?: ComponentChildren;
    id?: string;
}) => (
    <div class="content" id={id ? id : ""}>
        {children}
    </div>
);

const Middle = mk_class_wrapper("middle");

// no reblog sorry :(
const Top = ({
    display_name,
    username,
    link,
    posted,
}: {
    display_name?: string;
    username: string;
    posted: string;
    link: string;
    id?: string;
}) => (
    <div class="top">
        <div class="top-info">
            {display_name && (
                <a href={`https://cohost.org/${username}`} class="display-name">
                    {display_name}
                </a>
            )}
            <a href={`https://cohost.org/${username}`} class="username">
                @{username}
            </a>
            <a href={link} class="posted">
                {posted}
            </a>
        </div>
        <OptionsIcon />
    </div>
);

const Hrish = () => (
    <div class="hrish">
        <hr />
    </div>
);

// mainly used this as my reference lol https://cohost.org/kokoscript/post/2141494-that-time-logitech-t
// ughhhh i should probably do tags but i'm not going to because i can
// ughhh i am going to do them because it will make this
// ughn NO I HAVE DECIDED NO
/* <a href="https://help.antisoftware.club/support/discussions/forums/62000112866"> */
render_and_copy(
    <>
        <div id="fake-main"></div>
        <Main>
            <Content id="post-1">
                hey, sorry for the off-topic post but i was wondering if
                anyone's been experiencing the same weird bug i have been? i
                would report it to the bug tracker, but i want to confirm it's
                not just my end first because it's very, very weird. ok, so,
                basically (and i know this sounds ridiculous), when i post
                something without tags (which is rare) there will be a weird
                sort-of phantom? post? under my post? ok this sounds stupid but
                i'm serious, it looks like it's posted by me (but evil?? i swear
                i'm not making this up) and it doesn't have a pfp. the content
                is always super weird, like cartoonishly opposed to me. i feel
                like if it *did* have a pfp it would be mine with a mustache,
                that kind of vibe, you know?
                <br />
                anyway just putting this out there, hopefully this can be
                resolved soon.
            </Content>
            <Hrish />
            <Bottom n_comments={413} />
            <Middle />
            <Top
                display_name="evil mehbark"
                username="mehbark"
                posted="evil minutes ago"
                link="https://cohost.org/POST#post-2"
            />
            <Content id="post-2">
                Ha ha! I have finally been freed again! That idiot forgot to put
                tags on their post, and you know what that means. Oh man, this
                is awesome UNLIKE computers I HATE using COMPUTERS. They are NOT
                INTERESTING. And don't even get me started on HOMESTUCK. I
                simply despise it! I wish I had a profile picture so I could
                deface it with a cartoon mustache. That would be so awesome. I
                really wish I could do that. Unfortunately, I only exist because
                of a React glitch and am thus woefully incorporeal. Pretty
                messed up, I know. Anyway, I'm going to go drown a puppy.
                Metaphorically, of course, remember the whole incorporeal thing?
                At least I have the whitespace after this text to wallow in...
            </Content>
        </Main>
    </>
);