using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

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

    public class LayerExample : IComponent
    {
        public HTMLElement Render()
        {
            // A Layer renders its content at the end of the document, on top of
            // everything else — nothing of it sits in the normal page flow. Keep an
            // in-flow control in the returned tree to open and close it.
            var layer = Layer()
                .Content(
                    Stack().Children(
                        TextBlock("This content is rendered in a Layer, on top of the page.")
                    )
                );

            return Stack().Children(
                TextBlock("A Layer overlays the page from outside the normal flow:"),
                Button("Toggle Layer")
                    .Primary()
                    .OnClick((s, e) => layer.IsVisible = !layer.IsVisible)
            ).Render();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

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

    public class LayerSampleUsage : IComponent
    {
        public HTMLElement Render()
        {
            // A LayerHost gives the Layer a bounding box. It renders as a normal
            // in-flow element, so give it a size to reserve room for the overlay.
            var layerHost = LayerHost().Height(140.px());

            var layer = Layer()
                .Content(
                    Stack().Children(
                        TextBlock("Rendered by a Layer, projected into the LayerHost box.")
                    )
                );

            // Project the Layer into the host instead of the document body.
            layer.Host = layerHost;

            // Show the layer inside its host.
            layer.IsVisible = true;

            return Stack().Children(
                TextBlock("A Layer projected into a LayerHost:"),
                layerHost
            ).Render();
        }
    }
}