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

    public class SimpleNodeViewExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a NodeView instance
            var nodeView = NodeView().S();

            // Define a simple node with one input and one output
            nodeView.DefineNode("SimpleNode", ib =>
            {
                ib.AddInput("inp", () => NodeView.Interfaces.TextInputInterface("Input", "Initial value"));
                ib.AddOutput("out", () => NodeView.Interfaces.TextInterface("Output", "Result"));
            });

            // Listen to any changes on the NodeView
            nodeView.OnChange(nv =>
            {
                console.log("NodeView changed:");
                console.log(nv.GetJsonState(true));
            });

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

    public class NodeViewSample : IComponent
    {
        public HTMLElement Render()
        {
            var nodeView = NodeView().S();

            // Define a simple node with a text input and text output
            nodeView.DefineNode("Hello World", ib =>
                ib.AddInput("inp", () => NodeView.Interfaces.TextInputInterface("Input", "Hi Input"))
                  .AddOutput("out", () => NodeView.Interfaces.TextInputInterface("Output", "Hi Output"))
            );

            // Define a complex node with various input types and one output
            nodeView.DefineNode("Complex", ib =>
                ib.AddInput("text", () => NodeView.Interfaces.TextInterface("Input", "Hi Input"))
                  .AddInput("int", () => NodeView.Interfaces.IntegerInterface("Input", 123))
                  .AddInput("num", () => NodeView.Interfaces.NumberInterface("Input", 3.14))
                  .AddInput("btn", () => NodeView.Interfaces.ButtonInterface("Input", () => Toast().Information("Hi!")))
                  .AddInput("chk", () => NodeView.Interfaces.CheckboxInterface("Input", false))
                  .AddInput("sel", () => NodeView.Interfaces.SelectInterface("Input", "A", new ReadOnlyArray<string>(new[] { "A", "B", "C" })))
                  .AddInput("sld", () => NodeView.Interfaces.SliderInterface("Input", 0.5, 0, 1))
                  .AddOutput("out", () => NodeView.Interfaces.TextInterface("Output", "Hi Output"))
            );

            // Define a dynamic node that updates its outputs based on an input value
            nodeView.DefineDynamicNode("Dynamic", ib =>
                ib.AddInput("inp", () => NodeView.Interfaces.IntegerInterface("Output Count", 1)),
                (inputState, outputState, ib) =>
                {
                    var inputCount = inputState["inp"].As<int>();
                    for (int i = 0; i < inputCount; i++)
                    {
                        ib.AddOutput($"out-{i}", () => NodeView.Interfaces.TextInterface($"out-{i}", i.ToString()));
                    }
                }
            );

            // Create a text area to view and update the NodeView state in JSON format
            var textArea = TextArea().WS().H(10).Grow();

            // Update textArea when the NodeView state changes
            nodeView.OnChange(v => textArea.Text = v.GetJsonState(true));

            // Allow updating NodeView's state from the text area upon blur event
            textArea.OnBlur((ta, ev) => nodeView.SetState(ta.Text));

            // Render the final layout in a split view
            return SplitView().SplitInMiddle().Resizable().H(600).WS()
                              .Left(nodeView)
                              .Right(textArea)
                              .Render();
        }
    }
}