// TODO: add animations
class DialCircle extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
  ..strokeWidth = 5
  ..color = Colors.indigoAccent
  ..style = PaintingStyle.stroke;

  final textStyle = TextStyle(
    color: Colors.indigoAccent,
    fontSize: 30,
  );
  final textSpan = TextSpan(
    text: 'X',
    style: textStyle,
  );
  final textPainter = TextPainter(
    //text: textSpan,
    textDirection: TextDirection.ltr,
    textAlign: TextAlign.center,
  );


    final DIAL_RADIUS = 105.0;
    final CENTER_DIAL_RADIUS = 40.0;
    final STEPS = 10;


    final start_angle = vm.radians(60);
    final end_angle = vm.radians(340);
    final step = (end_angle - start_angle) / STEPS;

    canvas.drawCircle(Offset.zero, DIAL_RADIUS, paint);
    canvas.drawCircle(Offset.zero, CENTER_DIAL_RADIUS, paint);

    final numbers = ['1', '2', '3', '4', '5', '6', '7', '8','9', '0'].reversed.toList();

    for(var i=0; i < STEPS; ++i) {

    textPainter.text = TextSpan(text: numbers[i], style: textStyle);
    textPainter.layout(
      minWidth: 0,
      maxWidth: double.infinity,
    );


      final x = 80 * cos(i * step + start_angle);
      final y = 80 * sin(i * step + start_angle);
      final offset = Offset(x, y);
      canvas.drawCircle(offset, 15, paint);


      final textOffset = Offset(x - textPainter.width * 0.5, y - textPainter.height * 0.5);

      textPainter.paint(canvas, textOffset);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}