Badge.cs

using System;
using System.ComponentModel;
using System.Threading.Tasks;
using System.Windows.Input;
using Microsoft.Maui;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Shapes;
using Microsoft.Maui.Graphics;
 
namespace NeuroAccessMaui.UI.Controls
{
    public class Badge : Border
    {
        #region Fields
 
        private readonly Label badgeLabel;
 
        private const double indicatorSize = 10;
 
        #endregion
 
        #region Bindable Properties
 
        public static readonly BindableProperty TextProperty =
             BindableProperty.Create(
                  nameof(Text),
                  typeof(string),
                  typeof(Badge),
                  default(string),
                  propertyChanged: OnTextChanged);
 
        public static readonly BindableProperty FontSizeProperty =
             BindableProperty.Create(
                  nameof(FontSize),
                  typeof(double),
                  typeof(Badge),
                  12d,
                  propertyChanged: OnFontSizeChanged);
 
        public static readonly BindableProperty TextColorProperty =
             BindableProperty.Create(
                  nameof(TextColor),
                  typeof(Color),
                  typeof(Badge),
                  Colors.White,
                  propertyChanged: OnTextColorChanged);
 
        public static readonly BindableProperty FontFamilyProperty =
             BindableProperty.Create(
                  nameof(FontFamily),
                  typeof(string),
                  typeof(Badge),
                  default(string),
                  propertyChanged: OnFontFamilyChanged);
 
        public static readonly BindableProperty CornerRadiusProperty =
             BindableProperty.Create(
                  nameof(CornerRadius),
                  typeof(double),
                  typeof(Badge),
                  10d,
                  propertyChanged: OnCornerRadiusChanged);
 
        public static readonly BindableProperty IsIndicatorProperty =
             BindableProperty.Create(
                  nameof(IsIndicator),
                  typeof(bool),
                  typeof(Badge),
                  false,
                  propertyChanged: OnIsIndicatorChanged);
 
        public static readonly BindableProperty CommandProperty =
             BindableProperty.Create(
                  nameof(Command),
                  typeof(ICommand),
                  typeof(Badge),
                  null);
 
        public static readonly BindableProperty TextMarginProperty =
             BindableProperty.Create(
                  nameof(TextMargin),
                  typeof(Thickness),
                  typeof(Badge),
                  new Thickness(4),
                  propertyChanged: OnTextMarginChanged);
 
        #endregion
 
        #region Properties
 
        public string Text
        {
            get => (string)this.GetValue(TextProperty);
            set => this.SetValue(TextProperty, value);
        }
 
        public double FontSize
        {
            get => (double)this.GetValue(FontSizeProperty);
            set => this.SetValue(FontSizeProperty, value);
        }
 
        public Color TextColor
        {
            get => (Color)this.GetValue(TextColorProperty);
            set => this.SetValue(TextColorProperty, value);
        }
 
        public string FontFamily
        {
            get => (string)this.GetValue(FontFamilyProperty);
            set => this.SetValue(FontFamilyProperty, value);
        }
 
        public double CornerRadius
        {
            get => (double)this.GetValue(CornerRadiusProperty);
            set => this.SetValue(CornerRadiusProperty, value);
        }
 
        public bool IsIndicator
        {
            get => (bool)this.GetValue(IsIndicatorProperty);
            set => this.SetValue(IsIndicatorProperty, value);
        }
 
        public ICommand Command
        {
            get => (ICommand)this.GetValue(CommandProperty);
            set => this.SetValue(CommandProperty, value);
        }
 
        public Thickness TextMargin
        {
            get => (Thickness)this.GetValue(TextMarginProperty);
            set => this.SetValue(TextMarginProperty, value);
        }
 
        #endregion
 
        #region Constructors
 
        public Badge()
        {
            // Initially use the defined CornerRadius property.
            this.StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(this.CornerRadius) };
 
            this.badgeLabel = new Label
            {
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center,
                Text = this.Text,
                FontSize = this.FontSize,
                TextColor = this.TextColor,
                FontFamily = this.FontFamily
            };
 
            this.Content = this.badgeLabel;
 
            TapGestureRecognizer TapGesture = new TapGestureRecognizer();
            TapGesture.Tapped += this.OnBadgeTapped;
            this.GestureRecognizers.Add(TapGesture);
        }
 
        #endregion
 
        #region Event Handlers
 
        private void OnBadgeTapped(object? sender, EventArgs e)
        {
            if (this.Command?.CanExecute(null) == true)
            {
                this.Command.Execute(null);
            }
        }
 
        #endregion
 
        #region Bindable Property Changed Callbacks
 
        private static void OnTextMarginChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is Badge Badge && newValue is Thickness NewMargin)
            {
                Badge.badgeLabel.Margin = NewMargin;
                Badge.UpdateSizeAndShape();
            }
        }
 
        private static void OnTextChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is Badge Badge)
            {
                string TextValue = newValue?.ToString() ?? string.Empty;
                // Update visibility based on the new text value.
                Badge.UpdateVisibility();
 
                if (!Badge.IsIndicator)
                {
                    Badge.badgeLabel.Text = TextValue;
                    _ = Badge.AnimateBounceAsync();
                }
 
                Badge.UpdateSizeAndShape();
            }
        }
 
        private static void OnFontSizeChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is Badge Badge)
            {
                Badge.badgeLabel.FontSize = (double)newValue;
                Badge.UpdateSizeAndShape();
            }
        }
 
        private static void OnTextColorChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is Badge Badge)
            {
                Badge.badgeLabel.TextColor = (Color)newValue;
            }
        }
 
        private static void OnFontFamilyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is Badge Badge)
            {
                Badge.badgeLabel.FontFamily = newValue?.ToString();
            }
        }
 
        private static void OnCornerRadiusChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is Badge Badge && newValue is double)
            {
                // When the user sets CornerRadius explicitly, update the shape.
                Badge.UpdateCornerRadius();
            }
        }
 
        private static void OnIsIndicatorChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is Badge Badge)
            {
                bool IsIndicatorValue = (bool)newValue;
                Badge.badgeLabel.Text = IsIndicatorValue ? string.Empty : Badge.Text;
                Badge.UpdateSizeAndShape();
                Badge.UpdateVisibility();
            }
        }
 
        #endregion
 
        #region Private Methods
 
        private async Task AnimateBounceAsync()
        {
            await this.ScaleToAsync(1.2, 50);
            await this.ScaleToAsync(1.0, 50);
        }
 
        private void UpdateVisibility()
        {
            if (this.IsIndicator)
            {
                this.IsVisible = true;
            }
            else
            {
                if (string.IsNullOrEmpty(this.Text))
                {
                    this.IsVisible = false;
                }
                else if (int.TryParse(this.Text, out int Count))
                {
                    this.IsVisible = Count > 0;
                }
                else
                {
                    this.IsVisible = true;
                }
            }
        }
 
        private void UpdateCornerRadius()
        {
            if (this.IsIndicator)
            {
                this.StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(indicatorSize / 2) };
            }
            else if (this.Height > 0)
            {
                if (!string.IsNullOrEmpty(this.Text) && this.Text.Length == 1)
                {
                    this.StrokeShape = new Ellipse();
                }
                else
                {
                    // Use the smaller value between the user-set CornerRadius and half the control's height.
                    double EffectiveCornerRadius = Math.Min(this.CornerRadius, this.Height / 2);
                    this.StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(EffectiveCornerRadius) };
                }
            }
        }
 
        private void UpdateSizeAndShape()
        {
            if (this.IsIndicator)
            {
                this.badgeLabel.Text = string.Empty;
                this.HeightRequest = indicatorSize;
                this.WidthRequest = indicatorSize;
                this.StrokeShape = new RoundRectangle { CornerRadius = new CornerRadius(indicatorSize / 2) };
                return;
            }
 
            string TextValue = this.Text ?? string.Empty;
            if (TextValue.Length == 1)
            {
                Size Request = this.badgeLabel.Measure(double.PositiveInfinity, double.PositiveInfinity);
                double DesiredWidth = Request.Width + this.TextMargin.HorizontalThickness;
                double DesiredHeight = Request.Height + this.TextMargin.VerticalThickness;
                double Diameter = Math.Max(DesiredWidth, DesiredHeight);
                if (Diameter > 0)
                {
                    this.WidthRequest = Diameter;
                    this.HeightRequest = Diameter;
                }
 
                this.StrokeShape = new Ellipse();
                return;
            }
 
            this.WidthRequest = -1;
            this.HeightRequest = -1;
            this.UpdateCornerRadius();
        }
 
        #endregion
 
        #region Overrides
        protected override void OnBindingContextChanged()
        {
            base.OnBindingContextChanged();
 
            // Reapply visibility and corner radius adjustments.
            this.UpdateVisibility();
            this.UpdateSizeAndShape();
 
        }
 
        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
 
            // Update the shape based on the new size without resetting width/height requests.
            this.UpdateCornerRadius();
 
            // For multi-character text, ensure the width is at least the measured text width plus padding,
            // and also at least equal to the height (to maintain a pill shape).
            if (!this.IsIndicator && !string.IsNullOrEmpty(this.Text) && this.Text.Length > 1)
            {
                // Measure the label's requested size.
                Size Request = this.badgeLabel.Measure(double.PositiveInfinity, double.PositiveInfinity);
                double DesiredWidth = Math.Max(Request.Width + this.TextMargin.HorizontalThickness, height);
 
                // Only override if the current width is smaller than desired.
                if (width < DesiredWidth)
                {
                    this.WidthRequest = DesiredWidth;
                }
            }
        }
 
 
        #endregion
    }
}