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 = ({ alt_text = true }: { alt_text?: boolean }) =>
    alt_text ? (
        <img
            src="https://static.pyrope.net/cohost-reblog.png"
            alt="the cohost reblog icon"
            class="reblog"
        />
    ) : (
        <img src="https://static.pyrope.net/cohost-reblog.png" class="reblog" />
    );

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

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

export const Bottom = ({
    n_comments,
    alt_text = true,
}: {
    n_comments: number;
    alt_text?: boolean;
}) => (
    <div class="bottom">
        <div class="bottom-inner">
            <a
                class="comments"
                href="https://413.gay"
            >{`${n_comments} comments`}</a>
            <div class="interactions">
                <ReblogIcon alt_text={alt_text} />
                <LikeIcon alt_text={alt_text} />
            </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 :(
export const Top = ({
    display_name,
    username,
    link,
    posted,
    alt_text = true,
}: {
    display_name?: string;
    username: string;
    posted: string;
    link?: string;
    id?: string;
    alt_text?: boolean;
}) => (
    <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 alt_text={alt_text} />
    </div>
);

export 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>
    </>
);