@page "/galery"
@using LiteDB
@using squirrowse.core
@using squirrowse.web.Data
@inject IJSRuntime jsrun;
@inject GaleryService galery;
<h3>Galery</h3>
@*<table class="table">
        <thead>
        <tr>

            <th>Tag</th>
            <th>Img</th>

        </tr>
        </thead>
        <tbody>
        @foreach (var item in _frames.Keys)
        {
            <tr>
                <td>@item</td>
                @foreach (var t in _frames.GetValueOrDefault(item))
                {
                    <td>
                        <img src="@t.ImgSrc"/>
                    </td>
                }
            </tr>







        }
        </tbody>
    </table>*@
<table>
    <thead>
    <tr>
        @foreach (var item in _frames.Keys)
        {
            <th>
                <button @onclick="e => _tagsSwitch[item] = !_tagsSwitch.GetValueOrDefault(item)">
                    @(_tagsSwitch[item] ? $"  {item}" : $"  {item}")
                </button>
            </th>
        }
    </tr>
    </thead>
    <tbody>
    @foreach (var item in _frames.Keys)
    {
        <tr>
            <div class="demo-gallery   card card-default border @(_tagsSwitch[item] ? "collapse" : "")">
                <ul id="lightgallery" class="list-unstyled row lgalery">

                    @foreach (var t in _frames.GetValueOrDefault(item))
                    {
                        <ul class="col-xs-6 col-sm-4 col-md-3   " data-responsive="@t.ImgSrc" data-src="@t.ImgSrc">
                            <a href="./galery">
                                <img class="img-responsive" src="@t.ImgSrc" height="180" width="320"/>

                            </a>
                        </ul>
                    }
                </ul>
            </div>

        </tr>
    }
    </tbody>
</table>

@code {

    private ILiteDatabase repo;
    // private GaleryService _galery;
    private List<string> _tags;
    private readonly Dictionary<string, bool> _tagsSwitch = new Dictionary<string, bool>();
    private Dictionary<string, List<Frame>> _frames;
    private bool Collapsed = true;

    protected override async Task OnInitializedAsync()
    {
        _tags = await galery.tags();
        foreach (var t in _tags)
        {
            _tagsSwitch.Add(t, true);
        }
        _frames = await galery.galeryEntireView();


    // StateHasChanged();
    }

    //public async Task Colapse()
    //{
    //    await jsrun.InvokeVoidAsync("colapseD");
    //}

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await jsrun.InvokeVoidAsync("galeryJs");
        if (firstRender)
        {
    //_frames = null;
            GC.Collect();
        }
    }


}