using System;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            document.body.style.overflow = "hidden";
            MountCenteredToBody(new ObservableStackExample());
        }
    }

    public class ObservableStackExample : IComponent
    {
        public HTMLElement Render()
        {
            // ObservableList<T> implements IObservable<IReadOnlyList<T>>, so it can
            // drive an ObservableStack<T> directly.
            var items = new ObservableList<string>("Alpha", "Beta", "Gamma");

            // The stack reconciles its DOM with the list. The render delegate runs
            // once per newly-inserted item.
            var stack = new ObservableStack<string>(
                items,
                item => Card(TextBlock(item)).WS().MB(4.px()));

            return stack.Render();
        }
    }
}

using System;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            document.body.style.overflow = "hidden";
            MountCenteredToBody(new ObservableStackSample());
        }
    }

    public class ObservableStackSample : IComponent
    {
        private int _next = 4;

        public HTMLElement Render()
        {
            // The backing list — mutating it drives the stack's reconciliation.
            var items = new ObservableList<string>("Item 1", "Item 2", "Item 3");

            var stack = new ObservableStack<string>(
                items,
                item => Card(TextBlock(item)).WS().MB(4.px()));

            // Adding or removing items updates only the affected DOM rows; existing
            // rows (and their scroll position / focus) are left untouched.
            var controls = HStack().Children(
                Button("Add").SetIcon(UIcons.Plus)
                    .OnClick((s, e) => items.Add($"Item {_next++}")),
                Button("Remove last").SetIcon(UIcons.Minus)
                    .OnClick((s, e) => { if (items.Count > 0) items.RemoveAt(items.Count - 1); }));

            return VStack().WS().Padding(16.px()).Children(
                controls,
                stack.WS().PT(8)
            ).Render();
        }
    }
}