@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.PageViewModel>
@using System.Text.RegularExpressions;
@using Dynamicweb.Frontend
@using System.Reflection
@using System.Web.UI.HtmlControls
@using Dynamicweb.Content.Items
@using Dynamicweb.Rapido.Blocks.Components.General
@using Dynamicweb.Rapido.Blocks.Components
@using Dynamicweb.Rapido.Blocks.Components.Documentation
@using Dynamicweb.Rapido.Blocks

@* Component for the articles *@

@helper RenderComponentCode(dynamic settings)
{
    string methodName = settings.Content.component.HelperName;
    dynamic[] methodsettings = new dynamic[1];
    methodsettings[0] = settings.Content.component;

    string uniqueExampleId = !String.IsNullOrEmpty(settings.Content.Name) ? settings.Content.Name.Replace(" ", "").Replace("(", "").Replace(")", "") : "";
    uniqueExampleId = uniqueExampleId == "" ? settings.Content.component.GetType().Name.ToString() : uniqueExampleId;

    Type methodType = this.GetType();
    MethodInfo helperMethod = methodType.GetMethod(methodName);

    <div class="u-color-light-gray--bg u-border u-padding--lg u-margin-bottom--lg">
        <div class="u-bold u-margin-bottom--lg">@Translate("Basic usage")</div>
        <div>
            <div>Block myBlock = new Block</div>
            <div>{</div>
            <div>&nbsp;&nbsp;&nbsp;Id = "MyBlock",</div>
            <div>&nbsp;&nbsp;&nbsp;SortId = 10,</div>
            <div>&nbsp;&nbsp;&nbsp;Component = new @settings.Content.component.GetType().Name.ToString() { OPTIONAL_settings }</div>
            <div>};</div>
            <div>myPage.Add("MyContainer", myBlock);</div>
        </div>
        <p></p>
        <div class="u-bold">@Translate("Or")</div>
        <p></p>
        <div>
            <div>@@Render(new @settings.Content.component.GetType().Name.ToString() { OPTIONAL_settings })</div>
        </div>
    </div>
    
    if (!String.IsNullOrEmpty(settings.Content.CodeExample)) {
    <div class="u-bold u-margin-bottom--lg">@Translate("Implementation example")</div>
<textarea class="u-color-dark--bg u-color-light u-padding" id="@(uniqueExampleId)__CodeExample" name="@(uniqueExampleId)__CodeExample">  
@settings.Content.CodeExample
</textarea>
    @Render(new Button { Title = Translate("Copy to clipboard"), OnClick = "CopyCode(document.getElementById('" + uniqueExampleId + "__CodeExample'))", ButtonLayout = ButtonLayout.Secondary })
    <br />
    }

    <div class="u-bold u-margin-bottom--lg">@Translate("Markup result")</div>
<textarea class="u-color-dark--bg u-color-light u-padding" id="@(uniqueExampleId)__Code" name="@(uniqueExampleId)__Code">
@{
    try
    {
        HtmlElement finalHtmlElement = new HtmlElement();
        var helperMethodAsString = helperMethod.Invoke(this, methodsettings);
        @helperMethodAsString
    }
    catch (Exception ex)
    {
        throw new Exception(settings.GetType().Name + " method '" + methodName + "' could not be invoked", ex);
    }
}
</textarea>
@Render(new Button { Title = Translate("Copy to clipboard"), OnClick = "CopyCode(document.getElementById('" + uniqueExampleId + "__Code'))", ButtonLayout = ButtonLayout.Secondary })

    <style>
        .CodeMirror {   
          height: auto;
        }
    </style>

    <script>
        @if (!String.IsNullOrEmpty(settings.Content.CodeExample)) {
            <text>
            var myCodeExample = CodeMirror.fromTextArea(document.getElementById("@(uniqueExampleId)__CodeExample"), {
                lineNumbers: true,
                lineSeparator: "-newline",
                indentUnit: 4,
                mode: "coffeescript",
                tabMode: "indent",
                theme: "cobalt"
            });
            </text>
        }

        var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("@(uniqueExampleId)__Code"), {
            lineNumbers: true,
            mode: "xml",
            tabMode: "indent",
            theme: "cobalt"
        });
    </script>
}