@implements IAsyncDisposable

@inject IJSRuntime JS

<TelerikPopover @ref="@PopoverRef"
                AnchorSelector=".popover-target"
                ShowOn="@PopoverShowOn.Click"
                Position="@PopoverPosition.Right"
                Offset="20"
                Class="my-popover">
    <PopoverContent>
        Telerik Popover for Blazor
    </PopoverContent>
</TelerikPopover>

<p>Popover Hide Log: @PopoverOnHideLog</p>

<TelerikButton Class="popover-target" OnClick="ShowPopover">
    Show Popover
</TelerikButton>

<script suppress-error="BL9992">
    var dotnetRef;

    window.registerOutsideClick = function (dotnetHelper) {
        dotnetRef = dotnetHelper;
        document.addEventListener("click", onPopoverOutsideClick);
    };

    window.unregisterOutsideClick = function () {
        dotnetRef = null;
        document.removeEventListener("click", onPopoverOutsideClick);
    };

    function onPopoverOutsideClick(e) {
        window.setTimeout(() => {
            const popover = document.querySelector(".my-popover");
            const anchor = document.querySelector(".popover-target");

            const clickedInsidePopover = popover?.contains(e.target);
            const clickedAnchor = anchor?.contains(e.target);

            if (!clickedInsidePopover && !clickedAnchor) {
                dotnetRef?.invokeMethodAsync("OnPopoverHide");
            }
        }, 100);
    }
</script>

@code {
    #nullable enable

    private DotNetObjectReference<__Main>? DotNetRef { get; set; }

    private TelerikPopover? PopoverRef;

    private string PopoverOnHideLog { get; set; } = string.Empty;

    private void ShowPopover()
    {
        PopoverRef?.Show();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("registerOutsideClick", DotNetRef);
        }
    }

    protected override void OnInitialized()
    {
        DotNetRef = DotNetObjectReference.Create(this);
    }

    [JSInvokable]
    public void OnPopoverHide()
    {
        PopoverOnHideLog = $"Popover closed automatically at {DateTime.Now.ToString("HH:mm:ss")}";

        StateHasChanged();
    }

    public async ValueTask DisposeAsync()
    {
        if (DotNetRef != null)
        {
            DotNetRef.Dispose();
        }

        await JS.InvokeVoidAsync("unregisterOutsideClick");
    }
}

<TelerikButton OnClick="@ToggleStep">Toggle attachments step visibility</TelerikButton>

@if (WizardVisible)
{
    <TelerikWizard @bind-Value="@CurrStepIndex">
        <WizardSteps>
            <WizardStep Label="Personal Details" Icon="SvgIcon.User">
                <Content>
                    content here
                </Content>
            </WizardStep>

            @if (AttachmentsStepVisible)
            {
                <WizardStep Label="Attachments" Icon="SvgIcon.Paperclip">
                    <Content>
                        conditional content here
                    </Content>
                </WizardStep>
            }

            <WizardStep Label="Confirmation" Icon="SvgIcon.Check">
                <Content>
                    other content here
                </Content>
            </WizardStep>
        </WizardSteps>
    </TelerikWizard>
}


@code {
    private bool AttachmentsStepVisible { get; set; }
    private bool WizardVisible { get; set; } = true;

    private int CurrStepIndex { get; set; }

    private async void ToggleStep()
    {
        //dispose the Wizard
        WizardVisible = false;

        // defence against hiding the step when it is the last step, which would cause an exception
        if (AttachmentsStepVisible && CurrStepIndex == 2)
        {
            CurrStepIndex = 1;
        }

        //the actual visibility toggle
        AttachmentsStepVisible = !AttachmentsStepVisible;

        //allow some time for the disposal and toggling the step visibility prior to re-initialization
        await Task.Delay(10);

        //re-initialize the Wizard
        WizardVisible = true;

        StateHasChanged();
    }
}

@using System.Dynamic
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid OnRead="@OnGridRead"
             TItem="@ExpandoObject"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterMenu"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             Height="400px">
    <GridToolBarTemplate>
        <GridSearchBox />
    </GridToolBarTemplate>
    <GridColumns>
        @{
            if (GridData != null && GridData.Any())
            {
                <GridColumn Field="PropertyInt" FieldType="@GridPropertyTypes["PropertyInt"]" />
                <GridColumn Field="PropertyString" FieldType="@GridPropertyTypes["PropertyString"]" />
                <GridColumn Field="PropertyGroup" FieldType="@GridPropertyTypes["PropertyString"]" />
                <GridColumn Field="PropertyDate" FieldType="@GridPropertyTypes["PropertyDate"]" />
                <GridColumn Field="PropertyBool" FieldType="@GridPropertyTypes["PropertyBool"]" />
            }
        }
    </GridColumns>
</TelerikGrid>

@code {
    private List<ExpandoObject> GridData { get; set; } = new List<ExpandoObject>();

    private Dictionary<string, Type> GridPropertyTypes { get; set; } = new Dictionary<string, Type>() {
        { "Id", typeof(int) },
        { "PropertyInt", typeof(int) },
        { "PropertyString", typeof(string) },
        { "PropertyGroup", typeof(string) },
        { "PropertyDate", typeof(DateTime) },
        { "PropertyBool", typeof(bool) }
    };

    private async Task OnGridRead(GridReadEventArgs args)
    {
        args.Request.Filters.OfType<CompositeFilterDescriptor>()
        .Each(x =>
        {
            x.FilterDescriptors.OfType<FilterDescriptor>()
                .Each(y => y.MemberType = GridPropertyTypes[y.Member]);
        });

        var result = GridData.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 18; i++)
        {
            dynamic expando = new ExpandoObject();

            expando.Id = i;
            expando.PropertyGroup = $"Group {(i % 3 + 1)}";
            expando.PropertyInt = i;
            expando.PropertyString = $"String {(char)(64 + i)}{(char)(64 + i)}";
            expando.PropertyDate = DateTime.Now.AddMonths(-i);
            expando.PropertyBool = i % 2 != 0;

            GridData.Add(expando);
        }
    }
}

<InputTextArea class="k-textarea" @bind-Value="@myValue"></InputTextArea>

<TelerikGrid Data="@GridData"
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@SelectedItems"
             SelectedItemsChanged="@( (IEnumerable<Employee> newSelected) => OnSelectedItemsChanged(newSelected) )"
             Height="300px">
    <GridToolBarTemplate>
        <TelerikButton Enabled="@(SelectedItems.Any())" OnClick="@DeleteSelectedEmployees">Delete</TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" />
        <GridColumn Field="Name" Title="Name" />
        <GridColumn Field="Team" Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<Employee> GridData { get; set; } = Enumerable.Range(1, 10).Select(i => new Employee
    {
        EmployeeId = i,
        Name = $"Employee {i}",
        Team = $"Team {i % 3}"
    }).ToList();

    private List<Employee> SelectedItems { get; set; } = new();

    private void OnSelectedItemsChanged(IEnumerable<Employee> items)
    {
        SelectedItems = items.ToList();
    }

    private void DeleteSelectedEmployees()
    {
        if (SelectedItems.Any())
        {
            GridData = GridData.Except(SelectedItems).ToList();
            SelectedItems.Clear();
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public override bool Equals(object obj) => obj is Employee e && e.EmployeeId == EmployeeId;
        public override int GetHashCode() => EmployeeId.GetHashCode();
    }
}