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

const Tag = ({ tag }: { tag: string }) => (
    <a href={`https://cohost.org/rc/tagged/${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`.split("\n");

// repeating makes it seem more random
export const PseudoRandom = ({
    children,
    repeat = 5,
}: {
    children: ComponentChildren;
    repeat?: number;
}) => (
    <div
        class="pseudo-random"
        style={{
            display: "grid",
            gridTemplateColumns: `repeat(${
                toChildArray(children).length * repeat
            }, 1fr)`,
        }}
    >
        {...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%",
            height: "100%",
            display: "inline-block",
            cursor: "pointer",
        }}
        class="choice"
    >
        <summary
            style={{ listStyle: "none", width: "100%", height: "100%" }}
        ></summary>
        <div class="result">{children}</div>
    </details>
);

render_and_copy(
    <Main>
        Click for a random @TagOfTheDay tag
        <PseudoRandom>{...tags.map(tag => <Tag tag={tag} />)}</PseudoRandom>
    </Main>
);