@typeparam TItem
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime
 <button tabindex="-1" title=@Column.GetFilterOperatorText(Column.GetFilterOperator()) class="@FilterIconStyle()"
         aria-haspopup="menu" aria-controls="@filterId" aria-expanded="false">
     <i class="notranslate rzi">@Grid.FilterIcon</i>
    @if (Column.GetFilterOperator() == FilterOperator.DoesNotContain)
    {
        <s>@Column.GetFilterOperatorSymbol(Column.GetFilterOperator())</s>
    }
    else
    {
        @Column.GetFilterOperatorSymbol(Column.GetFilterOperator())
    }
</button>
<div id="@($"{filterId}")" class="rz-overlaypanel"
        style="display:none;" tabindex="0" role="menu" aria-label="@Grid.FilterText">
    <div class="rz-overlaypanel-content">
        <ul class="rz-listbox-list">
            @if (Column.FilterPropertyType != null && (QueryableExtension.IsEnumerable(Column.FilterPropertyType) || Column.FilterPropertyType == typeof(string)))
            {
                @if (Column.GetFilterOperators().Contains(FilterOperator.Contains))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.Contains)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.Contains))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.Contains)</span><span>@Grid.ContainsText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.DoesNotContain))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.DoesNotContain)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.DoesNotContain))">
                    <span class="rz-filter-menu-symbol"><s>@Column.GetFilterOperatorSymbol(FilterOperator.DoesNotContain)</s></span><span>@Grid.DoesNotContainText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.In))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.In)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.In))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.In)</span><span>@Grid.InText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.NotIn))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.NotIn)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.NotIn))">
                    <span class="rz-filter-menu-symbol"><s>@Column.GetFilterOperatorSymbol(FilterOperator.NotIn)</s></span><span>@Grid.NotInText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.StartsWith) && Column.FilterPropertyType == typeof(string))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.StartsWith)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.StartsWith))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.StartsWith)</span><span>@Grid.StartsWithText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.EndsWith) && Column.FilterPropertyType == typeof(string))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.EndsWith)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.EndsWith))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.EndsWith)</span><span>@Grid.EndsWithText</span>
                </button>
            </li>
                }
            }
                @if (Column.GetFilterOperators().Contains(FilterOperator.Equals))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.Equals)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.Equals))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.Equals)</span><span>@Grid.EqualsText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.NotEquals))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.NotEquals)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.NotEquals))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.NotEquals)</span><span>@Grid.NotEqualsText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.LessThan))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.LessThan)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.LessThan))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.LessThan)</span><span>@Grid.LessThanText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.LessThanOrEquals))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.LessThanOrEquals)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.LessThanOrEquals))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.LessThanOrEquals)</span><span>@Grid.LessThanOrEqualsText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.GreaterThan))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.GreaterThan)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.GreaterThan))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.GreaterThan)</span><span>@Grid.GreaterThanText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.GreaterThanOrEquals))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.GreaterThanOrEquals)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.GreaterThanOrEquals))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.GreaterThanOrEquals)</span><span>@Grid.GreaterThanOrEqualsText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.IsNull))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.IsNull)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.IsNull))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.IsNull)</span><span>@Grid.IsNullText</span>
                </button>
            </li>
                }
                @if (Column.GetFilterOperators().Contains(FilterOperator.IsNotNull))
                {
            <li role="presentation">
                <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.IsNotNull)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.IsNotNull))">
                    <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.IsNotNull)</span><span>@Grid.IsNotNullText</span>
                </button>
            </li>
                }
            @if (Column.GetFilterOperators().Contains(FilterOperator.IsEmpty) && Column.FilterPropertyType == typeof(string))
            {
                <li role="presentation">
                    <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.IsEmpty)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.IsEmpty))">
                        <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.IsEmpty)</span><span>@Grid.IsEmptyText</span>
                    </button>
                </li>
            }
            @if (Column.GetFilterOperators().Contains(FilterOperator.IsNotEmpty) && Column.FilterPropertyType == typeof(string))
            {
                <li role="presentation">
                    <button type="button" class="@(FilterOperatorStyle(Column, FilterOperator.IsNotEmpty)) rz-filter-menu-item" @onclick="@(args => ApplyFilter(FilterOperator.IsNotEmpty))">
                        <span class="rz-filter-menu-symbol">@Column.GetFilterOperatorSymbol(FilterOperator.IsNotEmpty)</span><span>@Grid.IsNotEmptyText</span>
                    </button>
                </li>
            }
            <li role="presentation">
                <button type="button" class="rz-multiselect-item rz-filter-menu-item" @onclick="@(args => ClearFilter())">
                    <span class="rz-filter-menu-symbol">x</span><span>@Grid.ClearFilterText</span>
                </button>
            </li>
        </ul>
    </div>
</div>
@code {
    [Parameter]
    public RadzenDataGridColumn<TItem> Column { get; set; } = default!;

    [Parameter]
    public RadzenDataGrid<TItem> Grid { get; set; } = default!;

    string filterId = string.Empty;

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

        filterId = $"{Grid.PopupID}{Column.GetFilterProperty()}{Column.UniqueID}fm";
    }

    protected string FilterOperatorStyle(RadzenDataGridColumn<TItem> column, FilterOperator value)
    {
        return column.GetFilterOperator() == value ?
            "rz-multiselect-item rz-state-highlight" :
            "rz-multiselect-item";
    }

    protected string FilterIconStyle()
    {
        var additionalStyle = Column.HasActiveFilter() ? "rz-grid-filter-active" : "";

        return $"rz-filter-button rz-button rz-button-md rz-button-icon-only rz-variant-flat rz-base rz-shade-default {additionalStyle}";
    }

    protected async Task ApplyFilter(FilterOperator value)
    {
        if (value == FilterOperator.IsNull || value == FilterOperator.IsNotNull 
            || value == FilterOperator.IsEmpty || value == FilterOperator.IsNotEmpty)
        {
            Column.SetFilterValue(value == FilterOperator.IsEmpty || value == FilterOperator.IsNotEmpty ? string.Empty : null);
            Column.SetFilterValue(null, false);
        }

        Column.SetFilterOperator(value);

        Grid.SaveSettings();

        await Grid.Filter.InvokeAsync(new DataGridColumnFilterEventArgs<TItem>()
        {
            Column = Column,
            FilterValue = Column.GetFilterValue(),
            SecondFilterValue = Column.GetSecondFilterValue(),
            FilterOperator = Column.GetFilterOperator(),
            SecondFilterOperator = Column.GetSecondFilterOperator(),
            LogicalFilterOperator = Column.GetLogicalFilterOperator()
        });

        await JSRuntime.InvokeVoidAsync("Radzen.closePopup", $"{filterId}");
        await Grid.ReloadInternal();
    }

    protected async Task ClearFilter()
    {
        Column.ClearFilters();

        Grid.SaveSettings();

        await JSRuntime.InvokeVoidAsync("Radzen.closePopup", $"{filterId}");

        await Grid.FilterCleared.InvokeAsync(new DataGridColumnFilterEventArgs<TItem>()
        {
            Column = Column,
            FilterValue = Column.GetFilterValue(),
            SecondFilterValue = Column.GetSecondFilterValue(),
            FilterOperator = Column.GetFilterOperator(),
            SecondFilterOperator = Column.GetSecondFilterOperator(),
            LogicalFilterOperator = Column.GetLogicalFilterOperator()
        });

        await Grid.ReloadInternal();
    }
}
