@page "/gallery"

@using DataAccess.Data
@using DataAccess.Models

@inject BildInfoData BildInfoData;
@inject WunschInfoData WunschInfoData;

<style>
    .image-grid {
        background-color: white; /* Hintergrund der RadzenDataList weiß machen */
    }

    .rz-data-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .image-grid-item {
        margin: 5px;
    }

    .image-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.9); /* Weißer Hintergrund mit Transparenz */
        z-index: 9999;
    }

    .image-popup-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        max-width: 800px;
        max-height: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        border-radius: 5px;
        background-color: white; /* Weißer Hintergrund für den Inhalt */
    }

    .image-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .close-button {
        flex: 0 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
    }
</style>

<div>
    <RadzenDataList WrapItems="@true" AllowPaging="true" Data="@_bildInfos" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
        <Template Context="bildInfo">
            <div class="image-grid-item">
                <RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
                    <RadzenButton Click="@(args => ShowImageInfo(bildInfo))">
                        <RadzenImage Src="@bildInfo.Dateiname" Style="width: 100%; height: 100%; object-fit: cover;" />
                    </RadzenButton>
                </RadzenCard>
            </div>
        </Template>
    </RadzenDataList>

    <div class="image-popup" style="@popupStyle">
        <div class="image-popup-content">
            <div class="image-info">
                <RadzenImage Src="@selectedImage" Style="max-width: 100%; max-height: 300px; object-fit: contain;" />
                <p>@infoText</p>
            </div>
            <div class="close-button">
                <RadzenButton Text="Close" Click="CloseImageInfo" />
            </div>
        </div>
    </div>
</div>

@code {
    string selectedImage;
    string infoText = "Info Text";
    string popupStyle = "display: none;";

    IEnumerable<BildInfoModel>? _bildInfos;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        _bildInfos = await BildInfoData.GetAllBildInfosAsync();
    }

    private async void ShowImageInfo(BildInfoModel bildInfo)
    {
        selectedImage = bildInfo.Dateiname;
        popupStyle = "display: block;";

        WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
        infoText = wunschInfo.BildBeschreibung;
    }

    private void CloseImageInfo()
    {
        popupStyle = "display: none;";
    }

    [Inject]
    private IWebHostEnvironment _environment { get; set; }
}