using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace Connected.Components;
public partial class RatingItem : UIComponent
{
///
/// Space separated class names
///
protected string ClassName =>
new CssBuilder("")
.AddClass($"mud-rating-item")
.AddClass($"mud-ripple mud-ripple-icon", !DisableRipple)
.AddClass($"yellow-text.text-darken-3", Color == ThemeColor.Default)
.AddClass($"mud-{Color.ToDescriptionString()}-text", Color != ThemeColor.Default)
.AddClass($"mud-rating-item-active", IsActive)
.AddClass($"mud-disabled", Disabled)
.AddClass($"mud-readonly", ReadOnly)
.AddClass(Class)
.Build();
[CascadingParameter]
private Rating Rating { get; set; }
///
/// This rating item value;
///
[Parameter]
public int ItemValue { get; set; }
internal string ItemIcon { get; set; }
internal bool IsActive { get; set; }
private bool IsChecked => ItemValue == Rating?.SelectedValue;
///
/// The Size of the icon.
///
[Parameter] public Size Size { get; set; } = Size.Medium;
///
/// The color of the component. It supports the theme colors.
///
[Parameter] public ThemeColor Color { get; set; } = ThemeColor.Default;
///
/// If true, disables ripple effect.
///
[Parameter] public bool DisableRipple { get; set; }
///
/// If true, the controls will be disabled.
///
[Parameter] public bool Disabled { get; set; }
///
/// If true, the item will be readonly.
///
[Parameter] public bool ReadOnly { get; set; }
///
/// Fires when element clicked.
///
[Parameter] public EventCallback ItemClicked { get; set; }
///
/// Fires when element hovered.
///
[Parameter] public EventCallback ItemHovered { get; set; }
protected override void OnParametersSet()
{
base.OnParametersSet();
ItemIcon = SelectIcon();
}
internal string SelectIcon()
{
if (Rating == null)
return null;
if (Rating.HoveredValue.HasValue && Rating.HoveredValue.Value >= ItemValue)
{
// full icon when @RatingItem hovered
return Rating.FullIcon;
}
else if (Rating.SelectedValue >= ItemValue)
{
if (Rating.HoveredValue.HasValue && Rating.HoveredValue.Value < ItemValue)
{
// empty icon when equal or higher RatingItem value clicked, but less value hovered
return Rating.EmptyIcon;
}
else
{
// full icon when equal or higher RatingItem value clicked
return Rating.FullIcon;
}
}
else
{
// empty icon when this or higher RatingItem is not clicked and not hovered
return Rating.EmptyIcon;
}
}
// rating item lose hover
internal Task HandleMouseOut(MouseEventArgs e)
{
if (Disabled || Rating == null)
return Task.CompletedTask;
IsActive = false;
return ItemHovered.InvokeAsync(null);
}
internal void HandleMouseOver(MouseEventArgs e)
{
if (Disabled) return;
IsActive = true;
ItemHovered.InvokeAsync(ItemValue);
}
private void HandleClick(MouseEventArgs e)
{
if (Disabled) return;
IsActive = false;
if (Rating?.SelectedValue == ItemValue)
{
ItemClicked.InvokeAsync(0);
}
else
{
ItemClicked.InvokeAsync(ItemValue);
}
}
}