import { JSX } from "preact";
import { DisappearOnClick, Main, render_and_copy, slidify } from "./common.tsx";

const Slide = ({
    slide,
    next,
    n,
    max,
}: {
    slide: JSX.Element;
    next?: JSX.Element;
    n: number;
    max: number;
}) =>
    next ? (
        <div class="slide">
            <details>
                <summary>
                    <div class="slide-content">{slide}</div>
                    <div class="slide-status">
                        {/* prob going to change this back to just n/max */}
                        {n == max ? (
                            <span class="done">
                                thank you so much for reading!
                            </span>
                        ) : (
                            <span class="position">
                                {n}/{max}
                            </span>
                        )}
                    </div>
                </summary>
                <div class="next">{next}</div>
            </details>
        </div>
    ) : (
        <div class="slide-content">{slide}</div>
    );

// let 'em click to get rid of stuff
// show that the names don't matter, their just symbols etc
// (use homestuck pictures)

render_and_copy(
    <Main>
        {slidify(Slide, [
            <>homestuck</>,
            <>is cool</>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
            <>
                bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "}
                bla
            </>,
        ])}
    </Main>
);