import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  State<TestPage> createState() => _TestPageState();
}

class CanvasPath {
  final Paint paint;
  List<Offset> path = [];

  CanvasPath({List<Offset>? path, required this.paint}) {
    this.path = path ?? [];
  }
}

class CanvasPaths with ChangeNotifier {
  List<CanvasPath> list = [];
  CanvasPaths(this.list);

  void notify() {
    notifyListeners();
  }

  set length(int newLength) {
    list.length = newLength;
  }

  int get length => list.length;
  CanvasPath operator [](int index) => list[index];
  void operator []=(int index, CanvasPath value) {
    list[index] = value;
  }

  bool get isEmpty => list.isEmpty;
  bool get isNotEmpty => list.isNotEmpty;
  CanvasPath get last => list.last;
  CanvasPath removeLast() => list.removeLast();
  void add(CanvasPath p) => list.add(p);

  CanvasPaths clone() {
    return CanvasPaths(List.from(list));
  }
}

class _TestPageState extends State<TestPage> {
  // the key for the repaint boundary
  final GlobalKey _repaintBoundaryKey = GlobalKey();

  // the transformation controller for the interactive viewer
  final TransformationController _transformationController = TransformationController();

  // the canvas paths for painting/masking
  final CanvasPaths _paths = CanvasPaths([]);

  // the paint properties
  Paint _paint = Paint()
    ..strokeCap = StrokeCap.round
    ..strokeJoin = StrokeJoin.round
    ..strokeWidth = 40.0
    ..isAntiAlias = true
    ..color = Colors.white
    ..blendMode = BlendMode.srcOver;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildPaintWidget(context),
    );
  }

  Widget _buildPaintWidget(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      color: Colors.black,
      child: InteractiveViewer(
        transformationController: _transformationController,
        panEnabled: false,
        scaleEnabled: false,
        minScale: 0.1,
        maxScale: 10.0,
        onInteractionStart: _onScaleStart,
        onInteractionEnd: _onScaleEnd,
        onInteractionUpdate: _onScaleUpdate,
        constrained: false,
        child: Opacity(
          opacity: 0.6,
          child: ClipRect(
            child: RepaintBoundary(
              key: _repaintBoundaryKey,
              child: ChangeNotifierProvider<CanvasPaths>.value(
                value: _paths,
                child: Consumer<CanvasPaths>(
                  builder: (_, points, __) {
                    return Stack(
                      children: [
                        CustomPaint(
                          size: const Size(768.0, 768.0),
                          painter: MyPainter(
                            paths: _paths,
                          ),
                        ),
                      ],
                    );
                  },
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  void _onScaleStart(ScaleStartDetails details) {
    var localPosition = _transformationController.toScene(details.localFocalPoint);
    var imageLocalPosition = localPosition.translate(0, 0);

    Paint p = copyPaint(_paint)..strokeWidth = (_paint.strokeWidth / _transformationController.value.getMaxScaleOnAxis());
    _paths.add(CanvasPath(path: [imageLocalPosition], paint: p));
    _paths.notify();
  }

  void _onScaleUpdate(ScaleUpdateDetails details) {
    var localPosition = _transformationController.toScene(details.localFocalPoint);
    var imageLocalPosition = localPosition.translate(0, 0);
    _paths.last.path.add(imageLocalPosition);
    _paths.notify();
  }

  void _onScaleEnd(ScaleEndDetails details) {
    _paths.notify();
  }

  static Paint copyPaint(Paint p) {
    Paint newPaint = Paint();
    newPaint.blendMode = p.blendMode;
    newPaint.color = p.color;
    newPaint.colorFilter = p.colorFilter;
    newPaint.filterQuality = p.filterQuality;
    newPaint.imageFilter = p.imageFilter;
    newPaint.invertColors = p.invertColors;
    newPaint.isAntiAlias = p.isAntiAlias;
    newPaint.maskFilter = p.maskFilter;
    newPaint.shader = p.shader;
    newPaint.strokeCap = p.strokeCap;
    newPaint.strokeJoin = p.strokeJoin;
    newPaint.strokeMiterLimit = p.strokeMiterLimit;
    newPaint.strokeWidth = p.strokeWidth;
    newPaint.style = p.style;
    return newPaint;
  }
}

class MyPainter extends CustomPainter {
  CanvasPaths paths;

  MyPainter({required this.paths});

  @override
  void paint(Canvas canvas, Size size) async {
    // draw all points as a single layer
    canvas.saveLayer(Offset.zero & size, Paint());
    for (int i = 0; i < paths.length; i++) {
      if (paths[i].path.isEmpty) continue;
      Paint paint = paths[i].paint;
      canvas.drawPoints(ui.PointMode.points, paths[i].path, paint);
    }
    canvas.restore();
  }

  @override
  bool shouldRepaint(MyPainter oldDelegate) => true;
}