import 'package:flutter/material.dart';

class ZoomableImage extends StatelessWidget {

  final ImageProvider _image;
  final UniqueKey _key = UniqueKey();
  final ImageFrameBuilder? frameBuilder;
  final ImageLoadingBuilder? loadingBuilder;
  final ImageErrorWidgetBuilder? errorBuilder;
  final double? width;
  final double? height;
  final Color? color;
  final Animation<double>? opacity;
  final FilterQuality filterQuality;
  final BlendMode? colorBlendMode;
  final BoxFit? fit;
  final AlignmentGeometry alignment;
  final ImageRepeat repeat;
  final Rect? centerSlice;
  final bool matchTextDirection;
  final bool gaplessPlayback;
  final String? semanticLabel;
  final bool excludeFromSemantics;
  final bool isAntiAlias;

  ZoomableImage(this._image, {
    Key? key,
    this.frameBuilder,
    this.loadingBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.opacity,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.isAntiAlias = false,
    this.filterQuality = FilterQuality.low,}) : super(key: key);

  @override
  Widget build(BuildContext context) => GestureDetector(
        child: Hero(
          tag: 'zoomImageHero${_key.hashCode}',
          child: Image(
            image: _image,
            key: _key,
            frameBuilder: frameBuilder,
            loadingBuilder: loadingBuilder,
            errorBuilder: errorBuilder,
            semanticLabel: semanticLabel,
            excludeFromSemantics: excludeFromSemantics,
            width: width,
            height: height,
            color: color,
            opacity: opacity,
            colorBlendMode: colorBlendMode,
            fit: fit,
            alignment: alignment,
            repeat: repeat,
            centerSlice: centerSlice,
            matchTextDirection: matchTextDirection,
            gaplessPlayback: gaplessPlayback,
            filterQuality: filterQuality,
            isAntiAlias: isAntiAlias,
          ),
        ),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return _ImageDetail(_image, _key);
          }));
        },
      );
}

class _ImageDetail extends StatelessWidget {

  final ImageProvider _image;

  const _ImageDetail(this._image, Key key) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InteractiveViewer(
      panEnabled: true,
      minScale: 1,
      maxScale: 3,
      child: Scaffold(
        body: GestureDetector(
          child: Center(
            child: Hero(
                tag: 'zoomImageHero${super.key.hashCode}',
                child: Image(image: _image),
                )
            ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}