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",
];

const default_repeat = 4;

// repeating makes it seem more random
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>
                this was generated on {new Date().toDateString()} at{" "}
                {new Date().toTimeString()}
            </li>
        </ul>
    </Main>
);