use leptos::prelude::*;

// 迭代是大多数应用程序中非常常见的任务。
// 那么如何获取数据列表并在 DOM 中渲染它？
// 这个示例将向您展示两种方法：
// 1) 对于大部分静态的列表，使用 Rust 迭代器
// 2) 对于增长、缩小或移动项目的列表，使用 <For/>

#[component]
fn App() -> impl IntoView {
    view! {
        <h1>"Iteration"</h1>
        <h2>"Static List"</h2>
        <p>"Use this pattern if the list itself is static."</p>
        <StaticList length=5/>
        <h2>"Dynamic List"</h2>
        <p>"Use this pattern if the rows in your list will change."</p>
        <DynamicList initial_length=5/>
    }
}

/// 计数器列表，没有添加或删除任何计数器的能力。
#[component]
fn StaticList(
    /// 此列表中包含多少个计数器。
    length: usize,
) -> impl IntoView {
    // 创建从递增数字开始的计数器 signals
    let counters = (1..=length).map(|idx| RwSignal::new(idx));

    // 当您有一个不变的列表时，您可以
    // 使用普通的 Rust 迭代器操作它
    // 并将其收集到 Vec<_> 中以插入到 DOM 中
    let counter_buttons = counters
        .map(|count| {
            view! {
                <li>
                    <button
                        on:click=move |_| *count.write() += 1
                    >
                        {count}
                    </button>
                </li>
            }
        })
        .collect::<Vec<_>>();

    // 注意如果 `counter_buttons` 是响应式列表
    // 并且其值发生变化，这将非常低效：
    // 每次列表变化时它都会重新渲染每一行。
    view! {
        <ul>{counter_buttons}</ul>
    }
}

/// 允许您添加或删除计数器的计数器列表。
#[component]
fn DynamicList(
    /// 开始时的计数器数量。
    initial_length: usize,
) -> impl IntoView {
    // 这个动态列表将使用 <For/> 组件。
    // <For/> 是一个键控列表。这意味着每一行
    // 都有一个定义的键。如果键不变，行
    // 将不会重新渲染。当列表变化时，只有
    // 最少数量的变化会应用到 DOM。

    // `next_counter_id` 将让我们生成唯一 ID
    // 我们通过简单地每次创建计数器时将 ID 增加一来做到这一点
    let mut next_counter_id = initial_length;

    // 我们生成一个初始列表，如在 <StaticList/> 中
    // 但这次我们包含 ID 和 signal
    // 请参阅下面 add_counter 中关于 ArcRwSignal 的注释
    let initial_counters = (0..initial_length)
        .map(|id| (id, ArcRwSignal::new(id + 1)))
        .collect::<Vec<_>>();

    // 现在我们将初始列表存储在 signal 中
    // 这样，我们就能够随时间修改列表，
    // 添加和删除计数器，它将响应式地变化
    let (counters, set_counters) = signal(initial_counters);

    let add_counter = move |_| {
        // 为新计数器创建 signal
        // 我们在这里使用 ArcRwSignal，而不是 RwSignal
        // ArcRwSignal 是引用计数类型，而不是我们到目前为止一直使用的
        // arena 分配的 signal 类型。
        // 当我们创建这样的 signals 集合时，使用 ArcRwSignal
        // 允许每个 signal 在其行被删除时被释放。
        let sig = ArcRwSignal::new(next_counter_id + 1);
        // 将此计数器添加到计数器列表
        set_counters.update(move |counters| {
            // 由于 `.update()` 给我们 `&mut T`
            // 我们可以只使用普通的 Vec 方法如 `push`
            counters.push((next_counter_id, sig))
        });
        // 增加 ID 使其始终唯一
        next_counter_id += 1;
    };

    view! {
        <div>
            <button on:click=add_counter>
                "Add Counter"
            </button>
            <ul>
                // <For/> 组件在这里是核心
                // 这允许高效的键控列表渲染
                <For
                    // `each` 接受任何返回迭代器的函数
                    // 这通常应该是 signal 或派生 signal
                    // 如果它不是响应式的，只需渲染 Vec<_> 而不是 <For/>
                    each=move || counters.get()
                    // 键应该对每行是唯一且稳定的
                    // 使用索引通常是一个坏主意，除非您的列表
                    // 只能增长，因为在列表内移动项目
                    // 意味着它们的索引会改变，它们都会重新渲染
                    key=|counter| counter.0
                    // `children` 从您的 `each` 迭代器接收每个项目
                    // 并返回一个视图
                    children=move |(id, count)| {
                        // 我们可以将 ArcRwSignal 转换为可复制的 RwSignal
                        // 以便在将其移动到视图中时获得更好的 DX
                        let count = RwSignal::from(count);
                        view! {
                            <li>
                                <button
                                    on:click=move |_| *count.write() += 1
                                >
                                    {count}
                                </button>
                                <button
                                    on:click=move |_| {
                                        set_counters
                                            .write()
                                            .retain(|(counter_id, _)| {
                                                counter_id != &id
                                            });
                                    }
                                >
                                    "Remove"
                                </button>
                            </li>
                        }
                    }
                />
            </ul>
        </div>
    }
}

fn main() {
    leptos::mount::mount_to_body(App)
}