@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");
    }
}