import { ComponentChildren, toChildArray } from "preact";
import { Main, render_and_copy, shuffle, n_of } from "./common.tsx";

const tag_link = (tag: string) => `https://cohost.org/rc/tagged/${tag}`;
const Tag = ({ tag }: { tag: string }) => (
    <a href={tag_link(tag)}>{`#${tag}`}</a>
);

const tags = [
    "CSS Crimes",
    "borgesposting",
    "NEISVoid",
    "circling the square",
    "retrocomputing",
    "cats of cohost",
    "coho film club",
    "cohost crafts",
    "the cohost plural feed",
    "cohost summer mixtape",
    "trans trucks",
    "The Cohost Local Feed (Minnesota)",
    "cohost draws",
    "tv head",
    "make up a mech pilot",
    "frasierposting",
    "cohost utilities",
    "alt text request",
    "meepismonday",
    "rats",
    "worldwide music wednesday",
    "chaos magick",
    "tea",
    "journaling",
    "digital collage",
    "gamedev",
    "manga recs",
    "doll posting",
    "comics on cohost",
    "he is only carbon now",
    "trickcircle",
    "Cohost Mixtape Club",
    "mashup",
    "girlposting",
    "jewhost",
    "musicians on cohost",
    "ooak",
    "The Cohost Gimmick Feed",
    "gardening",
    "dogs of cohost",
    "cheeseposting",
    "love",
    "little guy respect zone",
    "gunpla",
];

const default_repeat = 2;

// repeating makes it seem more random, but adds a lot of weight to an increasingly heavy post
export const PseudoRandom = ({
    children,
    repeat = default_repeat,
}: {
    children: ComponentChildren;
    repeat?: number;
}) => (
    <div
        class="pseudo-random"
        style={{
            display: "flex",
            backgroundColor: "#008282",
            borderRadius: "0.5rem",
            height: "3rem",
        }}
    >
        {...n_of(repeat, toChildArray(children))
            .map(shuffle)
            .flat()
            .map(child => <Choice>{child}</Choice>)}
    </div>
);

/// width is 0-1
export const Choice = ({ children }: { children: ComponentChildren }) => (
    <details
        style={{
            width: "100%",
            display: "flex",
            flex: 1,
            cursor: "pointer",
        }}
        class="choice"
    >
        <summary
            style={{ listStyle: "none", width: "100%", height: "100%" }}
        ></summary>
        <div
            class="result"
            style={{
                position: "absolute",
                top: "1.5rem",
                left: 0,
                right: 0,
                width: "100%",
                height: "fit-content",
                display: "flex",
                alignContent: "center",
                justifyContent: "center",
                verticalAlign: "center",
                color: "white",
            }}
        >
            {children}
        </div>
    </details>
);

render_and_copy(
    <Main>
        <PseudoRandom>{...tags.map(tag => <Tag tag={tag} />)}</PseudoRandom>
        Some notes:
        <ul>
            <li>all tags are from @TagOfTheDay</li>
            <li>i'll do my best to keep this up to date</li>
            <li>
                you can also go{" "}
                <a
                    href={`https://pyrope.net/randirect#${tags
                        .map(tag_link)
                        .join("::")}`}
                >
                    here
                </a>{" "}
                to be redirected to a random tag
            </li>
            <ul>
                <li>
                    it would be helpful if you could pester me in the comments
                    when this tag list is out of date (most recent first): (also
                    you can just like. use this tag list)
                </li>
                <ul>
                    {...tags.toReversed().map(tag => (
                        <li>
                            <Tag tag={tag} />
                        </li>
                    ))}
                </ul>
            </ul>
            <li>
                if there's enough interest, i'll hack together a little
                generator for these (it would be easy to make one for tags, but
                one for other stuff would require a bit more work)
            </li>
            <li>
                a lot of these tags are bad tags. not their content, but, like, the actual tag. this drives me up the wall but i know there's nothing i can do. i really wish everyone cared about good tagging as much as i do, but i know that will never happen. it's frustrating that only boorus seem to have good tags (sometimes) (implications and stuff help)
            </li>
            <li>
                this was generated on {new Date().toDateString()} at{" "}
                {new Date().toTimeString()}
            </li>
        </ul>
    </Main>
);