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 ModalUsageExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ModalUsageExample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Show modal").Primary().OnClick((s, e) =>
            {
                // Instantiate a modal with a header "Sample Modal"
                Modal modal = Modal(TextBlock("Sample Modal"))
                    .LightDismiss()                      // Enable closing the modal by clicking outside
                    .Width(50.vw())                      // Set width to 50% viewport width
                    .Height(50.vh())                     // Set height to 50% viewport height
                    .SetFooter(TextBlock("Footer text"))
                    .CenterContent();

                // Show the modal (centered by default)
                modal.Show();
            }).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 BasicModalExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class BasicModalExample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Show modal").Primary().OnClick((s, e) =>
            {
                // Create a modal with a title and footer.
                Modal modal = Modal(TextBlock("Basic Modal"))
                    .LightDismiss()                      // Enable dismiss by clicking outside or pressing [Esc].
                    .Width(50.vw())
                    .Height(50.vh())
                    .SetFooter(TextBlock("Footer Content"))
                    .CenterContent();

                // Show the modal centered on the page.
                modal.Show();
            }).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 PositionedModalExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class PositionedModalExample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Show positioned modal").Primary().OnClick(async (s, e) =>
            {
                // Create a modal without a header
                Modal modal = Modal()
                    .NoHeader()
                    .LightDismiss()
                    .Width(40.vw())
                    .Height(40.vh())
                    .SetFooter(TextBlock("Custom Footer"))
                    .CenterContent();

                // Show the modal at a specified position (e.g., 20px from top and left)
                modal.ShowAt(fromTop: 20.px(), fromLeft: 20.px());

                // Wait for the modal to be hidden before continuing
                await modal.ShowAsync();
                console.log("Modal has been hidden.");
            }).Render();
        }
    }
}