import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:vector_graphics/vector_graphics.dart';

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

class CompareApp extends StatelessWidget {
  const CompareApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const ComparePage(),
      theme: ThemeData(useMaterial3: true),
    );
  }
}

class ComparePage extends StatelessWidget {
  const ComparePage({super.key});

  @override
  Widget build(BuildContext context) {
    final items = const [
      ('env_dog1.svg', _Renderer.svg),
      ('env_dog1.vg.bin', _Renderer.vg),
      ('rectangle_4433.svg', _Renderer.svg),
      ('rectangle_4433.vg.bin', _Renderer.vg),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('SVG vs VG comparison'),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(36),
          child: Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Text(
              'Run with:  flutter run --enable-impeller   and   --no-enable-impeller',
              style: Theme.of(context).textTheme.labelSmall,
            ),
          ),
        ),
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(16),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 16,
          crossAxisSpacing: 16,
          childAspectRatio: 1,
        ),
        itemCount: items.length,
        itemBuilder: (_, i) {
          final (path, type) = items[i];
          return _VectorTile(path: 'assets/$path', type: type);
        },
      ),
    );
  }
}

enum _Renderer { svg, vg }

class _VectorTile extends StatelessWidget {
  const _VectorTile({required this.path, required this.type});
  final String path;
  final _Renderer type;

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 1,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: Center(
                child: AspectRatio(
                  aspectRatio: 1,
                  child: switch (type) {
                    _Renderer.svg => SvgPicture.asset(
                      path,
                      width: 220,
                      height: 220,
                      fit: BoxFit.contain,
                      clipBehavior: Clip.none,
                      placeholderBuilder: (_) => const CircularProgressIndicator(),
                      errorBuilder: (_, __, ___) => const DecoratedBox(
                        decoration: BoxDecoration(color: Color(0x11000000)),
                        child: Center(child: Text('SVG error')),
                      ),
                    ),
                    _Renderer.vg => VectorGraphic(
                      loader: AssetBytesLoader(path),
                      width: 220,
                      height: 220,
                      clipViewBox: false,
                    ),
                  },
                ),
              ),
            ),
            const SizedBox(height: 8),
            Text(
              path.split('/').last,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: Theme.of(context).textTheme.labelMedium,
            ),
            Text(
              type.name.toUpperCase(),
              style: Theme.of(context).textTheme.labelSmall,
            ),
          ],
        ),
      ),
    );
  }
}