import {
    Attributes,
    ComponentChild,
    ComponentChildren,
    JSX,
    VNode,
    toChildArray,
} from "preact";
import { render } from "preact-render-to-string";
import { writeText } from "copy-paste";

export function Main({
    children,
    ...attributes
}: {
    children?: ComponentChildren;
    attributes?: Attributes;
}) {
    return (
        <div {...attributes} id="main">
            {...toChildArray(children)}
        </div>
    );
}

export const HCenter = ({
    children,
    ...attrs
}: {
    children: ComponentChildren;
    attrs?: Attributes;
}) => (
    <div
        {...attrs}
        class="hcenter"
        style="display: flex; justify-content: center;"
    >
        {...toChildArray(children)}
    </div>
);

export const eggbug_emotions = {
    smiling: (
        <img
            class="eggbug"
            src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
            alt="eggbug, smiling"
        />
    ),
} as const;

export const EggbugImg = ({ type }: { type: keyof typeof eggbug_emotions }) =>
    eggbug_emotions[type];

export const render_and_copy = (elem: VNode, pretty = false) => {
    const rendered = render(elem, null, { pretty });
    writeText(rendered);
    console.log(rendered);
};

export const mk_class_wrapper =
    (klass: string) =>
    ({ children }: { children?: ComponentChildren }) =>
        <div class={klass}>{...toChildArray(children)}</div>;

export const slidify = (
    Slide: (_: {
        slide: JSX.Element;
        next?: JSX.Element;
        n: number;
        max: number;
    }) => JSX.Element,
    slides: JSX.Element[],
    n = 1,
    max = slides.length
): JSX.Element =>
    slides[0] ? (
        <Slide
            slide={slides[0]}
            next={slidify(Slide, slides.slice(1), n + 1, max)}
            n={n}
            max={max}
        />
    ) : (
        <></>
    );

// https://cohost.org/lexyeevee/post/2107474-css-for-css-baby-3 (wayyy down at the bottom)
export const DisappearOnClick = ({
    children,
    className,
}: {
    className?: string;
    children: ComponentChildren;
}) => (
    <details
        open
        class={`disappearing ${className}`}
        style="position: relative; cursor: pointer;"
    >
        <summary style="list-style: none; position: absolute; inset: 0;"></summary>
        {children}
    </details>
);