@using Telerik.Blazor
@using Telerik.Blazor.Components

<div id="treeSelectorComponent">
    <span class="telerik-blazor k-dropdownlist k-valid k-picker k-picker-solid k-picker-md k-rounded-md"
          onclick="@ToggleDropdown">
        <span class="k-input-inner @( DropDownShown ? "k-state-focused" : "" )">
            <span class="k-input-value-text">@GetSelectedItemsText()</span>
        </span>
        <button class="telerik-blazor k-button k-input-button k-button-solid k-button-md k-button-solid-base k-icon-button"
                type="button">
            <span class="telerik-blazor k-button-icon k-icon k-i-caret-alt-down"></span>
        </button>
    </span>
    <TelerikAnimationContainer @ref="dropdown" Class="k-popup treeView-scrollable-element" >
        <TelerikTreeView Data="TreeItems"
                         SelectionMode="TreeViewSelectionMode.Single"
                         OnItemClick="OnTreeItemClicked">
            <TreeViewBindings>
                <TreeViewBinding ParentIdField="ParentId"
                                 TextField="Text"
                                 IdField="Id">
                    <ItemTemplate>
                        @{
                            TreeItemSelector item = context as TreeItemSelector;
                            <span>@item!.Text</span>
                        }
                    </ItemTemplate>
                </TreeViewBinding>
            </TreeViewBindings>
        </TelerikTreeView>
    </TelerikAnimationContainer>
</div>

@code {
    private bool DropDownShown { get; set; }
    private TelerikAnimationContainer dropdown;

    [Parameter, EditorRequired]
    public List<TreeItemSelector> TreeItems { get; set; } = new List<TreeItemSelector>();
    [Parameter]
    public int TreeId { get; set; } = default!;
    [Parameter]
    public EventCallback<int> TreeIdChanged { get; set; }

    async Task ToggleDropdown()
    {
        DropDownShown = !DropDownShown;
        await dropdown.ToggleAsync();
    }
    string GetSelectedItemsText()
    {
        return TreeItems.FirstOrDefault(p => p.Id == TreeId)?.Text!;
    }

    private async Task OnTreeItemClicked(TreeViewItemClickEventArgs arg)
    {
        var item = arg.Item as TreeItemSelector;
        TreeId = item!.Id;
        if(TreeIdChanged.HasDelegate)
            await TreeIdChanged.InvokeAsync(TreeId);

        await ToggleDropdown();
    }

  public class TreeItemSelector 
  {
      public int Id { get; set; }
      public string Text { get; set; }
      public int? ParentId { get; set; }
      public bool HasChildren { get; set; }
  }
}

#treeSelectorComponent {
    .k-popup {
        &.treeView-scrollable-element{
            overflow-y: auto;
            max-height: 300px;
        }
    }
}

<TelerikAnimationContainer @ref="@tacHeaderJson" AnimationType="@AnimationType.PushRight" style="position: static !important;">
                            <TelerikTextBox @bind-Value="@DataMapHeaders.Value"
                                            Enabled=@Enabled
                                            Id="request-header">
                            </TelerikTextBox>
                        </TelerikAnimationContainer>                        
                        <TelerikAnimationContainer @ref="@tacHeaderTable" AnimationType="@AnimationType.PushLeft" style="position: static !important;">
                                <TelerikGrid Data=@HeadersTable
                                             Width="100%"
                                             EditMode="@GridEditMode.Inline"
                                             @ref="@GridRef">
                                    <GridToolBarTemplate>
                                        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus" Enabled="@Enabled">@Localizer!["Add"]</GridCommandButton>
                                    </GridToolBarTemplate>
                                    <GridColumns>
                                        <GridColumn Field="@nameof(HeaderParameter.Parameter)" Title="@Localizer!["Key"]"></GridColumn>
                                        <GridColumn Field="@nameof(HeaderParameter.Value)" Title="@Localizer!["Value"]"></GridColumn>
                                        <GridCommandColumn>
                                            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil" ThemeColor="@(ThemeConstants.Button.ThemeColor.Info)" Enabled="Enabled"></GridCommandButton>
                                            <GridCommandButton Command="Cancel" Icon="@SvgIcon.X" ThemeColor="@(ThemeConstants.Button.ThemeColor.Error)" OnClick="@DeleteHandler" Enabled="Enabled"></GridCommandButton>
                                            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" OnClick="@UpdateHandler" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" Enabled="Enabled"></GridCommandButton>
                                        </GridCommandColumn>
                                    </GridColumns>
                                </TelerikGrid>
                        </TelerikAnimationContainer>

.k-animation-container {
    position: static !important;
    overflow: hidden;
    z-index: 100;
}