use leptos::prelude::*;

// 迭代在大多数应用中都是一项非常常见的任务。
// Iteration is a very common task in most applications.
// 那么，如何获取数据列表并将其渲染到 DOM 中呢？
// So how do you take a list of data and render it in the DOM?
// 这个例子将向你展示两种方式：
// This example will show you the two ways:
// 1) 对于大部分是静态的列表，使用 Rust 迭代器
// 1) for mostly-static lists, using Rust iterators
// 2) 对于会增长、收缩或移动项目的列表，使用 <For/>
// 2) for lists that grow, shrink, or move items, using <For/>

#[component]
fn App() -> impl IntoView {
    view! {
        <h1>"Iteration"</h1>
        <h2>"Static List"</h2>
        <p>"如果列表本身是静态的，请使用这种模式。"</p>
        <StaticList length=5/>
        <h2>"Dynamic List"</h2>
        <p>"如果列表中的行会发生变化，请使用这种模式。"</p>
        <DynamicList initial_length=5/>
    }
}

/// 一个计数器列表，没有
/// 添加或删除功能。
/// A list of counters, without the ability
/// to add or remove any.
#[component]
fn StaticList(
    /// 列表中包含的计数器数量。
    /// How many counters to include in this list.
    length: usize,
) -> impl IntoView {
    // 创建以递增数字开始的计数器信号
    // create counter signals that start at incrementing numbers
    let counters = (1..=length).map(|idx| RwSignal::new(idx));

    // 当你有一个不改变的列表时，你可以
    // 使用普通的 Rust 迭代器来操作它
    // when you have a list that doesn't change, you can
    // manipulate it using ordinary Rust iterators
    // 并将其收集到一个 Vec<_> 中以插入 DOM
    // and collect it into a Vec<_> to insert it into the DOM
    let counter_buttons = counters
        .map(|count| {
            view! {
                <li>
                    <button
                        on:click=move |_| *count.write() += 1
                    >
                        {count}
                    </button>
                </li>
            }
        })
        .collect::<Vec<_>>();

    // 注意，如果 `counter_buttons` 是一个响应式列表
    // 并且其值发生了变化，这将会非常低效：
    // 它在每次列表改变时都会重新渲染每一行。
    // Note that if `counter_buttons` were a reactive list
    // and its value changed, this would be very inefficient:
    // it would rerender every row every time the list changed.
    view! {
        <ul>{counter_buttons}</ul>
    }
}

/// 一个允许添加或
/// 删除计数器的计数器列表。
/// A list of counters that allows you to add or
/// remove counters.
#[component]
fn DynamicList(
    /// 初始计数器数量。
    /// The number of counters to begin with.
    initial_length: usize,
) -> impl IntoView {
    // 这个动态列表将使用 <For/> 组件。
    // This dynamic list will use the <For/> component.
    // <For/> 是一个有键列表。这意味着每一行
    // 都有一个定义的键。如果键不改变，该行
    // 就不会被重新渲染。当列表改变时，只有
    // 最小数量的更改会被应用到 DOM。
    // <For/> is a keyed list. This means that each row
    // has a defined key. If the key does not change, the row
    // will not be re-rendered. When the list changes, only
    // the minimum number of changes will be made to the DOM.

    // `next_counter_id` 将让我们生成唯一的 ID
    // 我们通过在每次创建计数器时简单地将 ID 加一来做到这一点
    // `next_counter_id` will let us generate unique IDs
    // we do this by simply incrementing the ID by one
    // each time we create a counter
    let mut next_counter_id = initial_length;

    // 我们像在 <StaticList/> 中一样生成初始列表
    // 但这次我们将 ID 与信号一起包含在内
    // 请参阅下文 add_counter 中关于 ArcRwSignal 的注释
    // we generate an initial list as in <StaticList/>
    // but this time we include the ID along with the signal
    // see NOTE in add_counter below re: ArcRwSignal
    let initial_counters = (0..initial_length)
        .map(|id| (id, ArcRwSignal::new(id + 1)))
        .collect::<Vec<_>>();

    // 现在我们将该初始列表存储在一个信号中
    // 这样，我们将能够随着时间的推移修改列表，
    // 添加和删除计数器，它将响应式地发生变化
    // now we store that initial list in a signal
    // this way, we'll be able to modify the list over time,
    // adding and removing counters, and it will change reactively
    let (counters, set_counters) = signal(initial_counters);

    let add_counter = move |_| {
        // 为新计数器创建一个信号
        // 我们在这里使用 ArcRwSignal，而不是 RwSignal
        // ArcRwSignal 是一种引用计数类型，而不是我们到目前为止使用的
        // 竞技场分配（arena-allocated）的信号类型。
        // 当我们创建像这样的信号集合时，使用 ArcRwSignal
        // 允许每个信号在其行被删除时被释放。
        // create a signal for the new counter
        // we use ArcRwSignal here, instead of RwSignal
        // ArcRwSignal is a reference-counted type, rather than the arena-allocated
        // signal types we've been using so far.
        // When we're creating a collection of signals like this, using ArcRwSignal
        // allows each signal to be deallocated when its row is removed.
        let sig = ArcRwSignal::new(next_counter_id + 1);
        // 将此计数器添加到计数器列表中
        // add this counter to the list of counters
        set_counters.update(move |counters| {
            // 既然 `.update()` 给了我们 `&mut T`
            // 我们就可以直接使用正常的 Vec 方法如 `push`
            // since `.update()` gives us `&mut T`
            // we can just use normal Vec methods like `push`
            counters.push((next_counter_id, sig))
        });
        // 递增 ID 以使其始终保持唯一
        // increment the ID so it's always unique
        next_counter_id += 1;
    };

    view! {
        <div>
            <button on:click=add_counter>
                "Add Counter"
            </button>
            <ul>
                // <For/> 组件在这里至关重要
                // 这允许高效的有键列表渲染
                // The <For/> component is central here
                // This allows for efficient, key list rendering
                <For
                    // `each` 接收任何返回迭代器的函数
                    // 这通常应该是一个信号或派生信号
                    // 如果它不是响应式的，直接渲染 Vec<_> 而不是 <For/>
                    // `each` takes any function that returns an iterator
                    // this should usually be a signal or derived signal
                    // if it's not reactive, just render a Vec<_> instead of <For/>
                    each=move || counters.get()
                    // 键应该是每行唯一且稳定的
                    // 使用索引通常是个坏主意，除非你的列表
                    // 只会增长，因为在列表内部移动项目
                    // 意味着它们的索引会改变，它们都会重新渲染
                    // the key should be unique and stable for each row
                    // using an index is usually a bad idea, unless your list
                    // can only grow, because moving items around inside the list
                    // means their indices will change and they will all rerender
                    key=|counter| counter.0
                    // `children` 接收来自 `each` 迭代器的每个项目
                    // 并返回一个视图
                    // `children` receives each item from your `each` iterator
                    // and returns a view
                    children=move |(id, count)| {
                        // 我们可以将 ArcRwSignal 转换为可复制（Copy）的 RwSignal
                        // 以便在将其移动到视图中时获得更好的开发体验（DX）
                        // we can convert our ArcRwSignal to a Copy-able RwSignal
                        // for nicer DX when moving it into the view
                        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)
}