@page "/"
@page "/Gallery"
@inject ITagService tagService
@inject IFeedService feedService
@inject IUserService userService
@inject IJSRuntime jsRuntime
@implements IDisposable
@attribute [Authorize]

<PageTitle>@Title</PageTitle>

@if(Ingest && !userService.UserSessionState.ShowNsfw) {
    <div id="feed-error">
        <p><center>Ingest feed is not available unless NSFW mode is enabled!</center></p>
        <p><center><i>You must enable NSFW mode to continue...</i></center></p>
    </div>
} else if(TagId is not null && Query is not null) {
    <div id="feed-error">
        <p><center>Invalid query parameters! Both a search query and</center></p>
        <p><center>a tag ID have been specified!</center></p>
    </div>
} else {
	<div style="padding:var(--size-default-gap);">
		@foreach(var media in displayMedia) {
			// Precalculate thumbnail size to help the browser
			// lay out the images during initial page load
			int width = (int) media.CurrentUploadedFile!.Width! * 200 / (int) media.CurrentUploadedFile.Height!;
			<a href="/ViewMedia?m=@(media.Guid)">
				<img src="/media/thumb/@(media.Guid)?h=200" width=@width height="200"/>
			</a>
		}
		<div id="canary" style="height:1px;"></div>
	</div>
}

<script suppress-error="BL9992">
    function registerScrollObserver(dotNetObject) {
        var scrollObserver = new IntersectionObserver(
            async (e) => {
                if(e[0].isIntersecting) {
                    await dotNetObject.invokeMethodAsync('LoadMedia', false);
                }
            },
            {
                root: document.getElementById('content'),
                threshold: 0
            });
        scrollObserver.observe(document.getElementById("canary"));
    }
</script>

@code {
    [Parameter]
    [SupplyParameterFromQuery(Name = "t")]
    public Guid? TagId { get; set; }

    [Parameter]
    [SupplyParameterFromQuery(Name = "q")]
    public string? Query { get; set; }

    [Parameter]
    [SupplyParameterFromQuery]
    public bool Ingest { get; set; } = false;

    public const int PageSize = 50;

    private string Title {
        get {
            if(Query is null)
                return Ingest ? "Ingest Feed" : "Gallery";
            else
                return "Search Results";
        }
    }

    private List<Media> displayMedia;

    protected override void OnInitialized() =>
        userService.UserSessionState.OnStateChange += ShowNsfwChanged;

    protected override void OnParametersSet() => LoadMedia(true);

    protected override void OnAfterRender(bool firstRender) {
        if(firstRender)
            jsRuntime.InvokeVoidAsync(
                "registerScrollObserver",
                DotNetObjectReference.Create(this));
    }

    [JSInvokable("LoadMedia")]
    public void LoadMedia(bool initial = false) {
        Media? key = displayMedia?.Any() ?? false && !initial ? displayMedia.Last() : null;

        if(initial)
            displayMedia = new();

        if(TagId is not null && Query is null) {
            displayMedia!.AddRange(feedService.LoadChunk(
                    selectIngest: Ingest,
                    includeNsfw:  userService.UserSessionState.ShowNsfw,
                    tagId:        (Guid) TagId!,
                    key:          key,
                    count:        PageSize));
        } else if(Query is not null && TagId is null) {
            displayMedia!.AddRange(feedService.LoadChunk(
                    selectIngest: Ingest,
                    includeNsfw:  userService.UserSessionState.ShowNsfw,
                    query:        string.IsNullOrWhiteSpace(Query) ? null : Query,
                    key:          key,
                    count:        PageSize));
        } else {
            displayMedia!.AddRange(feedService.LoadChunk(
                    selectIngest: Ingest,
                    includeNsfw:  userService.UserSessionState.ShowNsfw,
                    key:          key,
                    count:        PageSize));
        }

        StateHasChanged();
    }

    private async void ShowNsfwChanged(UserSessionState userSessionState) {
        await InvokeAsync(() => {
            LoadMedia(true);
        });
    }

    public void Dispose() =>
		userService.UserSessionState.OnStateChange -= ShowNsfwChanged;
}