@inject HttpClient Http
@inject IJSRuntime JS

<div @ref="ViewContainerRef" class="w-100 h-100">
    <MudTable Class="h-100 w-100" @ref="Table" Items="@MapsShow" T="MapDto" Dense Hover ReadOnly FixedHeader RowClass="cursor-pointer" Striped Elevation="10"
              ServerData="ReloadData" Loading=@IsLoading Height="@($"{TableHeight}px")" HorizontalScrollbar=true>
        <ToolBarContent>
            <h4>Maps</h4>
        </ToolBarContent>
        <HeaderContent>
            <MudTh>Nr</MudTh>
            <MudTh>Name</MudTh>
            <MudTh>Width (m)</MudTh>
            <MudTh>Height (m)</MudTh>
            <MudTh>Resolution (m/px)</MudTh>
            <MudTh>OriginX</MudTh>
            <MudTh>OriginY</MudTh>
            <MudTh></MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="Nr">
                @(Table?.CurrentPage * Table?.RowsPerPage + MapsShow.IndexOf(context) + 1)
            </MudTd>
            <MudTd DataLabel="Name">
                @context.Name
            </MudTd>
            <MudTd DataLabel="Width">
                @context.Width
            </MudTd>
            <MudTd DataLabel="Height">
                @context.Height
            </MudTd>
            <MudTd DataLabel="Resolution">
                @context.Resolution
            </MudTd>
            <MudTd DataLabel="OriginX">
                @context.OriginX
            </MudTd>
            <MudTd DataLabel="OriginY">
                @context.OriginY
            </MudTd>
            <MudTd>
                <MudMenuItem Icon="@Icons.Material.Filled.Edit" IconColor="Color.Info">Active</MudMenuItem>
                <MudMenuItem Icon="@Icons.Material.Filled.Delete" IconColor="Color.Error">Delete</MudMenuItem>
            </MudTd>
        </RowTemplate>
        <PagerContent>
            <div class="d-flex w-100 flex-row-reverse">
                <MudTablePager Style="width: 100%;" PageSizeOptions="new[] { 25, 100, 200 }" />
            </div>
        </PagerContent>
    </MudTable>
</div>


@code {
    private string txtSearch = "";
    private bool IsLoading = false;

    private List<MapDto> Maps = [];
    private List<MapDto> MapsShow = [];

    private MapDto MapSelected = new();

    private MudTable<MapDto>? Table;
    private ElementReference ViewContainerRef;

    private double TableHeight = 105;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (!firstRender) return;

        var containerSize = await JS.InvokeAsync<DomRect>("getElementSize", ViewContainerRef);
        TableHeight = containerSize.Height - 105;
        // await LoadMaps();
        StateHasChanged();
    }

    private async Task LoadMaps()
    {
        try
        {
            IsLoading = true;
            Maps.Clear();
            StateHasChanged();

            var maps = await Http.GetFromJsonAsync<IEnumerable<MapDto>>($"api/MapsManager?txtSearch={txtSearch}");
            Maps.AddRange(maps ?? []);

            Table?.ReloadServerData();
            IsLoading = false;
            StateHasChanged();
        }
        catch
        {
            return;
        }
    }

    private void TextSearchChanged(string text)
    {
        txtSearch = text;
        Table?.ReloadServerData();
    }

    private bool FilterFunc(MapDto map)
    {
        if (string.IsNullOrWhiteSpace(txtSearch))
            return true;
        if (map.Name is not null && map.Name.Contains(txtSearch, StringComparison.OrdinalIgnoreCase))
            return true;
        if ($"{map.Name}".Contains(txtSearch))
            return true;
        return false;
    }

    private Task<TableData<MapDto>> ReloadData(TableState state, CancellationToken _)
    {
        MapsShow.Clear();
        var tasks = new List<MapDto>();
        Maps.ForEach(map =>
        {
            if (FilterFunc(map)) tasks.Add(map);
        });
        MapsShow = tasks.Skip(state.Page * state.PageSize).Take(state.PageSize).ToList();
        return Task.FromResult(new TableData<MapDto>() { TotalItems = tasks.Count, Items = MapsShow });
    }

    public class DomRect
    {
        public double Width { get; set; }
        public double Height { get; set; }
    }
}