@using Elsa.Api.Client.Resources.Scripting.Extensions;
@using Elsa.Api.Client.Resources.Scripting.Models;
@using Variant = MudBlazor.Variant

<div class="d-flex flex-grow-1 gap-4 align-content-start relative">
    <div class="flex-1">

        <MudField Variant="Variant.Outlined" Label="@DisplayName" HelperText="@Description" Margin="Margin.Dense"
                  Class="@(DisplayCodeEditor ? "d-block" : "d-none")" Disabled="ReadOnly">
            <StandaloneCodeEditor
                @ref="_monacoEditor"
                Id="@_monacoEditorId"
                ConstructionOptions="ConfigureMonacoEditor"
                CssClass="studio-expression-input-monaco-editor"
                OnDidInit="OnMonacoInitializedAsync"
                OnDidChangeModelContent="OnMonacoContentChangedAsync"/>
        </MudField>

        @if (!DisplayCodeEditor)
        {
            @ChildContent
        }

    </div>
    @{
        
        RenderFragment DisplayDropdownItem(ExpressionDescriptor? item) => @<div>
            @{
                var isChecked = item?.Type == _selectedExpressionType;
                var iconColor = isChecked ? Color.Secondary : Color.Transparent;
                var displayName = item?.DisplayName ?? DefaultOption;

                <MudMenuItem Class="studio-expression-input-menu-item"
                             OnClick="@(() => OnSyntaxSelectedAsync(item?.Type))" Icon="@Icons.Material.Filled.Check"
                             IconSize="Size.Small" IconColor="iconColor">@displayName</MudMenuItem>
            }
        </div>;

        <div class="flex-none pt-1">
            <MudMenu Label="@ButtonLabel" Icon="@ButtonIcon" Variant="@ButtonVariant" Color="@ButtonColor"
                     EndIcon="@ButtonEndIcon" IconColor="@ButtonEndColor" Dense="true" Disabled="ReadOnly">
                @DisplayDropdownItem(null)
                <MudDivider/>
                @foreach (var item in BrowsableExpressionDescriptors.Where(i => !string.IsNullOrEmpty(i.GetMonacoLanguage())))
                {
                    @DisplayDropdownItem(item)
                }
                <MudDivider/>
                @foreach (var item in BrowsableExpressionDescriptors.Skip(1).Where(i => string.IsNullOrEmpty(i.GetMonacoLanguage())))
                {
                    @DisplayDropdownItem(item)
                }
            </MudMenu>
        </div>
    }
</div>