use leptos::prelude::*;
use leptos_meta::Stylesheet;
use leptos_ui::clx;
use std::time::Duration;

#[component]
pub fn DemoWordRotation() -> impl IntoView {
    view! {
        <Stylesheet href="/components/word_rotation.css" />

        <div class="h-[400px] grid place-content-center font-roboto-slab">
            <WordRotationWrapper>
                <WordRotation>
                    <span>Know</span>
                    // <TransitionWordComponent />
                    <span>with no limits.</span>
                </WordRotation>
                <SimpleCounter initial_value=23 />
            </WordRotationWrapper>
        </div>

        // ----- SCRIPT -----
        <script src="/components/word_rotation.js"></script>
    }
}

#[component]
pub fn SimpleCounter(initial_value: i32) -> impl IntoView {
    // create a reactive signal with the initial value
    let (value, set_value) = signal(initial_value);

    // create event handlers for our buttons
    // note that `value` and `set_value` are `Copy`, so it's super easy to move them into closures
    let clear = move |_| set_value(0);
    let decrement = move |_| set_value.update(|value| *value -= 1);
    let increment = move |_| set_value.update(|value| *value += 1);

    // create user interfaces with the declarative `view!` macro
    view! {
        <div>
            <button on:click=clear>Clear</button>
            <button on:click=decrement>-1</button>
            // text nodes can be quoted or unquoted
            <span>"Value: " {value} "!"</span>
            <button on:click=increment>+1</button>
        </div>
    }
}

#[component]
pub fn TransitionWordComponent() -> impl IntoView {
    let (count, set_count) = signal(0);

    set_interval(
        move || set_count.update(|c| *c += 1),
        Duration::from_secs(2),
    );


    view! {
        <span style="view-transition-name: swap;">{count}</span>
    }
}

mod components {
    use super::*;
    clx! {WordRotationWrapper, main, "my-0 mx-auto py-8 px-4 w-[800px] resize text-[2.5rem] overflow-hidden"}
    clx! {WordRotation, p, "flex flex-wrap m-0 gap-[0.5ch] leading-[0.9]"}
}

pub use components::*;

// TODO. Add this to the WordRotation component.
// span:nth-of-type(2) {
//     color: hsl(64, 100%, 50%);
// }