using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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()
        {
            var sampleComponent = new MasonryExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MasonryExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create the Masonry layout with 4 columns and a 10px gutter (default).
            // Masonry needs a definite width to measure its columns — without one
            // it collapses and the cards overlap, so give it a fixed width here.
            var masonry = Masonry(4).W(480);

            // Add multiple card components to the Masonry layout
            for (int i = 0; i < 8; i++)
            {
                // Creating a simple card with variable height
                var card = Card(
                    VStack().AlignItemsCenter().JustifyContent(ItemJustify.Center)
                          .Children(TextBlock($"Card {i}").NoWrap()))
                          .H(60 + (i % 3) * 30);
                masonry.Add(card);
            }

            return masonry.Render();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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()
        {
            var sampleComponent = new MasonryLayoutSample();
            document.body.style.overflow = "auto";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MasonryLayoutSample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a Masonry instance with 4 columns and a fixed width so the
            // columns can be measured (a stretched masonry collapses its layout).
            var masonry = Masonry(4).W(520);

            // Generate and add 24 cards with random heights
            var random = new Random();
            for (int i = 0; i < 24; i++)
            {
                // Each card is created with a base height plus a multiple of 40px
                var height = 80 + (int)(random.NextDouble() * 5) * 40;
                var card = Card(
                    VStack()
                        .AlignItemsCenter()
                        .JustifyContent(ItemJustify.Center)
                        .Children(TextBlock($"Card {i}").NoWrap()))
                    .H(height);

                masonry.Add(card);
            }

            return masonry.Render();
        }
    }
}