use dioxus::prelude::*;

fn main() {
    rink::launch(app);
    // rink::launch_cfg(
    //     app,
    //     rink::Config {
    //         rendering_mode: rink::RenderingMode::Ansi,
    //     },
    // )
}

fn app(cx: Scope) -> Element {
    let (alpha, set_alpha) = use_state(&cx, || 100);

    cx.render(rsx! {
        div {
            width: "100%",
            height: "100%",
            flex_direction: "column",
            // justify_content: "center",
            // align_items: "center",
            // flex_direction: "row",
            onwheel: move |evt| {
                set_alpha((alpha + evt.data.delta_y as i64).min(100).max(0));
            },

            p {
                background_color: "black",
                flex_direction: "column",
                justify_content: "center",
                align_items: "center",
                // height: "10%",
                color: "green",
                "hi"
                "hi"
                "hi"
            }

            li {
                background_color: "red",
                flex_direction: "column",
                justify_content: "center",
                align_items: "center",
                // height: "10%",
                "bib"
                "bib"
                "bib"
                "bib"
                "bib"
                "bib"
                "bib"
                "bib"
            }
            li {
                background_color: "blue",
                flex_direction: "column",
                justify_content: "center",
                align_items: "center",
                // height: "10%",
                "zib"
                "zib"
                "zib"
                "zib"
                "zib"
                "zib"
            }
            p {
                background_color: "yellow",
                "asd"
            }
            p {
                background_color: "green",
                "asd"
            }
            p {
                background_color: "white",
                "asd"
            }
            p {
                background_color: "cyan",
                "asd"
            }
            div {
                font_weight: "bold",
                color: "#666666",
                p {
                    "bold"
                }
                p {
                    font_weight: "normal",
                    " normal"
                }
            }
            p {
                font_style: "italic",
                color: "red",
                "italic"
            }
            p {
                text_decoration: "underline",
                color: "rgba(255, 255, 255)",
                "underline"
            }
            p {
                text_decoration: "line-through",
                color: "hsla(10, 100%, 70%)",
                "line-through"
            }
            div{
                position: "absolute",
                top: "1px",
                background_color: "rgba(255, 0, 0, 50%)",
                width: "100%",
                p {
                    color: "rgba(255, 255, 255, {alpha}%)",
                    background_color: "rgba(100, 100, 100, {alpha}%)",
                    "rgba(255, 255, 255, {alpha}%)"
                }
                p {
                    color: "rgba(255, 255, 255, 100%)",
                    "rgba(255, 255, 255, 100%)"
                }
            }
        }
    })
}