var rnd = new Random();
var names = new[] { "Phones", "Laptops", "Tablets", "TVs", "Audio", "Watches" };
var palette = new[] { "#5EE7C4", "#3FC7DE", "#2E7BF6", "#6C5CE7", "#B15EE7", "#E75E9B" };
var count = names.Length;

const double pieSize = 196;
const double labelRadiusRatio = 0.62;
const string background = "#12161F";

var values = new double[count];
var shown = new double[count];
var from = new double[count];

var sliceLabels = new List<SkiaLabel>();
SkiaLayer plot = null;
SkiaSvg icon = null;

void Roll()
{
    for (int i = 0; i < count; i++)
        values[i] = rnd.Next(8, 50);
}
Roll();

// slice labels sit at the middle of their own wedge, so they move as the pie morphs
void PositionLabels()
{
    var total = shown.Sum();
    if (total <= 0)
        return;

    var radius = pieSize / 2 * labelRadiusRatio;
    var angle = -90.0;
    for (int i = 0; i < count; i++)
    {
        var sweep = shown[i] / total * 360.0;
        var mid = (angle + sweep / 2) * Math.PI / 180;
        sliceLabels[i].TranslationX = Math.Cos(mid) * radius;
        sliceLabels[i].TranslationY = Math.Sin(mid) * radius;
        sliceLabels[i].IsVisible = sweep >= 22;
        angle += sweep;
    }
}

void Play(double seconds)
{
    plot.Animate(seconds, (me, animator, value, dt) =>
    {
        for (int i = 0; i < count; i++)
            shown[i] = from[i] + (values[i] - from[i]) * value;
        PositionLabels();
        me.Update();
    }, repeat: 0, easing: Easing.CubicOut);
}

void Refresh()
{
    Array.Copy(shown, from, count);
    Roll();
    var total = values.Sum();
    for (int i = 0; i < count; i++)
        sliceLabels[i].Text = $"{values[i] / total * 100:0}%";
    icon?.AnimateRotation(0, 360, seconds: 0.7, easing: Easing.CubicInOut);
    Play(0.7);
}

return new SkiaLayer()
{
    BackgroundColor = Color.Parse(background),
    Children = new List<SkiaControl>()
    {
        new SkiaStack()
        {
            Spacing = 4,
            Children = new List<SkiaControl>()
            {
                new SkiaLayer()
                {
                    Children = new List<SkiaControl>()
                    {
                        new SkiaStack()
                        {
                            Spacing = 2,
                            Children = new List<SkiaControl>()
                            {
                                new SkiaLabel("Market Share")
                                {
                                    FontSize = 22,
                                    FontAttributes = FontAttributes.Bold,
                                    TextColor = Colors.White,
                                },
                                new SkiaLabel("share of units shipped, Q3")
                                {
                                    FontSize = 12,
                                    TextColor = Color.Parse("#78849B"),
                                },
                            }
                        }.StartX().CenterY(),

                        new SkiaShape()
                        {
                            Type = ShapeType.Circle,
                            WidthRequest = 30,
                            LockRatio = 1,
                            BackgroundColor = Color.Parse("#262F42"),
                            StrokeColor = Color.Parse("#2E7BF6"),
                            StrokeWidth = 1,
                            AnimationTapped = SkiaTouchAnimation.Ripple,
                            TouchEffectColor = Color.Parse("#5EE7C4"),
                            Children = new List<SkiaControl>()
                            {
                                new SkiaSvg()
                                {
                                    SvgString = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-8 8s3.58 8 8 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/></svg>",
                                    TintColor = Color.Parse("#5EE7C4"),
                                    WidthRequest = 16,
                                    LockRatio = 1,
                                }.Center().Assign(out icon),
                            }
                        }
                        .EndX()
                        .CenterY()
                        .OnTapped(me => Refresh()),
                    }
                }.FillX(),

                new SkiaLayer()
                {
                    WidthRequest = pieSize,
                    HeightRequest = pieSize,
                    Margin = new Thickness(0, 14, 0, 0),
                    Children = names.Select((name, i) => (SkiaControl)new SkiaLabel("0%")
                    {
                        FontSize = 13,
                        FontAttributes = FontAttributes.Bold,
                        TextColor = Colors.White,
                    }
                    .Center()
                    .Adapt(me => sliceLabels.Add(me))).ToList()
                }
                .CenterX()
                .Assign(out plot)
                .WhenPaint((me, ctx) =>
                {
                    var canvas = ctx.Context.Canvas;
                    var rect = ctx.Destination;
                    var scale = ctx.Scale;

                    var total = shown.Sum();
                    if (total <= 0)
                        return;

                    using var wedge = new SKPaint
                    {
                        IsAntialias = true,
                        Style = SKPaintStyle.Fill,
                    };
                    using var divider = new SKPaint
                    {
                        IsAntialias = true,
                        Style = SKPaintStyle.Stroke,
                        StrokeWidth = 2f * scale,
                        Color = SKColor.Parse(background),
                    };

                    float angle = -90;
                    for (int i = 0; i < count; i++)
                    {
                        var sweep = (float)(shown[i] / total * 360.0);
                        wedge.Color = SKColor.Parse(palette[i]);
                        canvas.DrawArc(rect, angle, sweep, true, wedge);
                        canvas.DrawArc(rect, angle, sweep, true, divider);
                        angle += sweep;
                    }
                }),

                new SkiaWrap()
                {
                    Spacing = 8,
                    Margin = new Thickness(0, 16, 0, 0),
                    Children = names.Select((name, i) => (SkiaControl)new SkiaRow()
                    {
                        Spacing = 10,
                        Children = new List<SkiaControl>()
                        {
                            new SkiaShape()
                            {
                                Type = ShapeType.Circle,
                                WidthRequest = 9,
                                LockRatio = 1,
                                BackgroundColor = Color.Parse(palette[i]),
                            }.CenterY(),

                            new SkiaLabel(name)
                            {
                                FontSize = 13,
                                TextColor = Color.Parse("#9FB0C9"),
                            }.CenterY(),
                        }
                    }).ToList()
                }.CenterX(),
            }
        }
        .Center()
        .WithWidth(320)
        .WithPadding(24)
        .Initialize(me =>
        {
            var total = values.Sum();
            for (int i = 0; i < count; i++)
            {
                from[i] = 0;
                sliceLabels[i].Text = $"{values[i] / total * 100:0}%";
            }
            Play(0.9);
        }),
    }
}.Fill();