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

namespace Tesserae.Tests
{
    public class TabbedModalDemo : IComponent
    {
        private readonly IComponent _content;
        private Pivot _pivot;
        private int _modalCount = 0;

        public TabbedModalDemo()
        {
            _pivot = Pivot();

            _content = VStack().Children(
                HStack().Children(
                    Button("Open Closeable Modal").OnClick((_, __) => AddModalTab(closeable: true)),
                    Button("Open Non-Closeable Modal").OnClick((_, __) => AddModalTab(closeable: false))
                ),
                _pivot.WS().H(500)
            );

            // Add an initial modal
            AddModalTab(true);
        }

        private void AddModalTab(bool closeable)
        {
            _modalCount++;
            string id = $"modal-{_modalCount}";
            string titleText = $"Modal {_modalCount}";

            var modal = Modal(titleText).Content(
                VStack().Children(
                    TextBlock($"This is the content of {titleText}").Regular(),
                    TextBlock($"It is embedded in the pivot and {(closeable ? "can" : "cannot")} be closed.").Small()
                ).Padding(16.px())
            );

            _pivot.Host(modal, id, PivotTitle(titleText, UIcons.Browser), closeable: closeable, onClosed: () => {
                console.log($"Tab {id} was closed!");
            });

            _pivot.Select(id);
        }

        public HTMLElement Render() => _content.Render();
    }

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