use leptos::*;

// 到目前为止，我们只处理过组件中的局部状态
// 我们只了解了如何在父子组件之间进行通信
// 但是还有一些更通用的方法来管理全局状态
//
// 全局状态的三种最佳方法是
// 1. 使用路由器通过 URL 驱动全局状态
// 2. 通过上下文传递信号
// 3. 创建一个全局状态结构体，并使用 `create_slice` 创建指向它的镜头
//
// 选项 #1：URL 作为全局状态
// 本教程的接下来几节将介绍路由器。
// 所以现在，我们将只关注选项 #2 和 #3。

// 选项 #2：通过上下文传递信号
//
// 在像 React 这样的虚拟 DOM 库中，使用 Context API 来管理全局
// 状态是一个坏主意：因为整个应用程序都存在于一棵树中，所以改变
// 树中高层提供的某些值会导致整个应用程序重新渲染。
//
// 在像 Leptos 这样的细粒度响应式库中，情况并非如此。
// 你可以在应用程序的根目录中创建一个信号，并使用 provide_context() 将其传递给
// 其他组件。更改它只会导致在实际使用它的特定位置重新渲染，
// 而不会导致整个应用程序重新渲染。
#[component]
fn Option2() -> impl IntoView {
    // 这里我们在根目录中创建一个信号，可以在应用程序的任何地方使用它。
    let (count, set_count) = create_signal(0);
    // 我们将把设置器传递给特定的组件，
    // 但通过上下文将计数本身提供给整个应用程序
    provide_context(count);

    view! {
        <h1>"Option 2: Passing Signals"</h1>
        // SetterButton 允许修改计数
        <SetterButton set_count/>
        // 这些消费者只能读取它
        // 但是如果我们愿意，我们可以通过传递 `set_count` 来赋予他们写权限
        <div style="display: flex">
            <FancyMath/>
            <ListItems/>
        </div>
    }
}

/// 增加我们全局计数器的按钮。
#[component]
fn SetterButton(set_count: WriteSignal<u32>) -> impl IntoView {
    view! {
        <div class="provider red">
            <button on:click=move |_| set_count.update(|count| *count += 1)>
                "Increment Global Count"
            </button>
        </div>
    }
}

/// 使用全局计数进行一些“花哨”数学运算的组件
#[component]
fn FancyMath() -> impl IntoView {
    // 这里我们使用 `use_context` 使用全局计数信号
    let count = use_context::<ReadSignal<u32>>()
        // 我们知道我们刚刚在父组件中提供了它
        .expect("there to be a `count` signal provided");
    let is_even = move || count() & 1 == 0;

    view! {
        <div class="consumer blue">
            "The number "
            <strong>{count}</strong>
            {move || if is_even() {
                " is"
            } else {
                " is not"
            }}
            " even."
        </div>
    }
}

/// 显示从全局计数生成的项目列表的组件。
#[component]
fn ListItems() -> impl IntoView {
    // 再次使用 `use_context` 使用全局计数信号
    let count = use_context::<ReadSignal<u32>>().expect("there to be a `count` signal provided");

    let squares = move || {
        (0..count())
            .map(|n| view! { <li>{n}<sup>"2"</sup> " is " {n * n}</li> })
            .collect::<Vec<_>>()
    };

    view! {
        <div class="consumer green">
            <ul>{squares}</ul>
        </div>
    }
}

// 选项 #3：创建一个全局状态结构体
//
// 你可以使用此方法来构建一个单一的全局数据结构
// 来保存整个应用程序的状态，然后通过
// 使用 `create_slice` 或 `create_memo` 获取细粒度切片来访问它，
// 这样更改状态的一部分不会导致你的
// 应用程序中依赖于状态其他部分的部分发生更改。

#[derive(Default, Clone, Debug)]
struct GlobalState {
    count: u32,
    name: String,
}

#[component]
fn Option3() -> impl IntoView {
    // 我们将提供一个保存整个状态的单一信号
    // 每个组件将负责创建自己的“镜头”来访问它
    let state = create_rw_signal(GlobalState::default());
    provide_context(state);

    view! {
        <h1>"Option 3: Passing Signals"</h1>
        <div class="red consumer" style="width: 100%">
            <h2>"Current Global State"</h2>
            <pre>
                {move || {
                    format!("{:#?}", state.get())
                }}
            </pre>
        </div>
        <div style="display: flex">
            <GlobalStateCounter/>
            <GlobalStateInput/>
        </div>
    }
}

/// 更新全局状态中计数的组件。
#[component]
fn GlobalStateCounter() -> impl IntoView {
    let state = use_context::<RwSignal<GlobalState>>().expect("state to have been provided");

    // `create_slice` 让我们可以创建数据的一个“镜头”
    let (count, set_count) = create_slice(

        // 我们从 `state` 中获取一个切片
        state,
        // 我们的 getter 返回数据的“切片”
        |state| state.count,
        // 我们的 setter 描述了如何根据新值修改该切片
        |state, n| state.count = n,
    );

    view! {
        <div class="consumer blue">
            <button
                on:click=move |_| {
                    set_count(count() + 1);
                }
            >
                "Increment Global Count"
            </button>
            <br/>
            <span>"Count is: " {count}</span>
        </div>
    }
}

/// 更新全局状态中计数的组件。
#[component]
fn GlobalStateInput() -> impl IntoView {
    let state = use_context::<RwSignal<GlobalState>>().expect("state to have been provided");

    // 这个切片完全独立于我们在另一个组件中创建的 `count` 切片
    // 它们都不会导致另一个重新运行
    let (name, set_name) = create_slice(
        // 我们从 `state` 中获取一个切片
        state,
        // 我们的 getter 返回数据的“切片”
        |state| state.name.clone(),
        // 我们的 setter 描述了如何根据新值修改该切片
        |state, n| state.name = n,
    );

    view! {
        <div class="consumer green">
            <input
                type="text"
                prop:value=name
                on:input=move |ev| {
                    set_name(event_target_value(&ev));
                }
            />
            <br/>
            <span>"Name is: " {name}</span>
        </div>
    }
}
// 这个 `main` 函数是应用程序的入口点
// 它只是将我们的组件挂载到 <body> 上
// 因为我们将其定义为 `fn App`，所以我们现在可以在
// 模板中将其用作 <App/>
fn main() {
    leptos::mount_to_body(|| view! { <Option2/><Option3/> })
}