import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const DecorationComparisonScreen(),
    );
  }
}

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

  @override
  State<DecorationComparisonScreen> createState() =>
      _DecorationComparisonScreenState();
}

class _DecorationComparisonScreenState
    extends State<DecorationComparisonScreen> {
  ui.Image? _boxDecorationImage;
  ui.Image? _shapeDecorationImage;
  ui.Image? _differenceImage;

  @override
  void initState() {
    super.initState();
    _generateImages();
  }

  Future<void> _generateImages() async {
    final size = const Size(300, 300);

    _boxDecorationImage = await _createImageFromDecoration(
      BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.black,
        border: Border.all(color: Colors.black, width: 2),
      ),
      size,
    );

    _shapeDecorationImage = await _createImageFromDecoration(
      ShapeDecoration(
        shape: const CircleBorder(
          side: BorderSide(color: Colors.black, width: 2),
        ),
        color: Colors.black,
      ),
      size,
    );

    if (_boxDecorationImage != null && _shapeDecorationImage != null) {
      _differenceImage = await _computeDifference(_boxDecorationImage!, _shapeDecorationImage!);
    }

    setState(() {});
  }

  Future<ui.Image?> _createImageFromDecoration(
      Decoration decoration, Size size) async {
    final recorder = ui.PictureRecorder();
    final canvas = Canvas(recorder);

    if (decoration is ShapeDecoration) {
      decoration.createBoxPainter(() {}).paint(
        canvas,
        Offset.zero,
        ImageConfiguration(size: size),
      );
    } else {
      decoration.createBoxPainter().paint(
        canvas,
        Offset.zero,
        ImageConfiguration(size: size),
      );
    }

    final picture = recorder.endRecording();
    return picture.toImage(size.width.toInt(), size.height.toInt());
  }

  Future<ui.Image?> _computeDifference(ui.Image image1, ui.Image image2) async {
    final data1 = await image1.toByteData(format: ui.ImageByteFormat.rawRgba);
    final data2 = await image2.toByteData(format: ui.ImageByteFormat.rawRgba);

    if (data1 == null || data2 == null) return null;

    final bytes1 = data1.buffer.asUint8List();
    final bytes2 = data2.buffer.asUint8List();
    final diffBytes = Uint8List(bytes1.length);

    for (int i = 0; i < bytes1.length; i += 4) {
      bool diff = bytes1[i] != bytes2[i] ||
          bytes1[i + 1] != bytes2[i + 1] ||
          bytes1[i + 2] != bytes2[i + 2] ||
          bytes1[i + 3] != bytes2[i + 3];

      diffBytes[i] = diff ? 255 : bytes1[i]; // Red if different
      diffBytes[i + 1] = diff ? 0 : bytes1[i + 1];
      diffBytes[i + 2] = diff ? 0 : bytes1[i + 2];
      diffBytes[i + 3] = 255;
    }

    final buffer = await ui.ImmutableBuffer.fromUint8List(diffBytes);
    final descriptor = ui.ImageDescriptor.raw(
      buffer,
      width: image1.width,
      height: image1.height,
      pixelFormat: ui.PixelFormat.rgba8888,
    );
    final codec = await descriptor.instantiateCodec();
    final frameInfo = await codec.getNextFrame();
    return frameInfo.image;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Decoration Comparison')),
      body: _boxDecorationImage != null &&
              _shapeDecorationImage != null &&
              _differenceImage != null
          ? DefaultTabController(
              length: 3,
              child: Column(
                children: [
                  const TabBar(
                    tabs: [
                      Tab(text: 'BoxDecoration'),
                      Tab(text: 'ShapeDecoration'),
                      Tab(text: 'Difference'),
                    ],
                  ),
                  Expanded(
                    child: TabBarView(
                      children: [
                        Center(
                          child: RawImage(image: _boxDecorationImage!),
                        ),
                        Center(
                          child: RawImage(image: _shapeDecorationImage!),
                        ),
                        Center(
                          child: RawImage(image: _differenceImage!),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            )
          : const Center(child: CircularProgressIndicator()),
    );
  }
}