import 'dart:ui' as ui;

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Center(
        child: CustomButton(
          onTap: (_) {},
          child: Container(
            color: Colors.red,
            width: 120.0,
            height: 120.0,
            child: const Center(
              child: Text('Test'),
            ),
          ),
        ),
      ),
    );
  }
}

class CustomButton extends StatefulWidget {
  final Widget child;
  final ValueChanged<Offset>? onTap;
  final ValueChanged<Offset>? onLongTap;
  final GestureTapDownCallback? onTapDown;
  final BorderRadiusGeometry borderRadius;

  const CustomButton({
    super.key,
    required this.child,
    required this.onTap,
    this.onLongTap,
    this.onTapDown,
    this.borderRadius = BorderRadius.zero,
  });

  @override
  _ButtonState createState() => _ButtonState();
}

class _ButtonState extends State<CustomButton>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animation;
  late Duration _animationDuration;
  late Curve _animationCurve;
  Offset _tapPosition = Offset.zero;

  @override
  void initState() {
    super.initState();
    _animation = AnimationController(vsync: this);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final ThemeData theme = Theme.of(context);
    _animationDuration = theme.animationDuration;
    _animationCurve = theme.animationCurve;
  }

  @override
  void dispose() {
    _animation.dispose();
    super.dispose();
  }

  void _onHoverStart(TapDownDetails details) {
    _tapPosition = details.globalPosition;
    widget.onTapDown?.call(details);
    if (widget.onTap != null || widget.onLongTap != null) {
      _animation.animateTo(
        1.0,
        duration: _animationDuration,
        curve: _animationCurve,
      );
    }
  }

  void _onHoverEnd() {
    if (widget.onTap == null && widget.onLongTap == null) {
      return;
    }
    if (_animation.value < 1.0) {
      final TickerFuture ticker = _animation.animateTo(
        1.0,
        duration: _animationDuration * 0.5,
        curve: _animationCurve,
      );
      ticker.whenComplete(() {
        _animation.animateBack(
          0.0,
          duration: _animationDuration * 0.5,
          curve: _animationCurve,
        );
      });
    } else if (_animation.value > 0.0) {
      _animation.animateBack(
        0.0,
        duration: _animationDuration,
        curve: _animationCurve,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap != null
          ? () => HapticFeedback.lightImpact()
              .whenComplete(() => widget.onTap!(_tapPosition))
          : null,
      onLongPress: widget.onLongTap != null
          ? () => HapticFeedback.lightImpact()
              .whenComplete(() => widget.onLongTap!(_tapPosition))
          : null,
      onTapDown: _onHoverStart,
      onTapUp: (_) => _onHoverEnd(),
      onTapCancel: () => _onHoverEnd(),
      child: Container(
        color: Colors.transparent,
        child: AnimatedBuilder(
          animation: _animation,
          child: widget.child,
          builder: (_, Widget? child) {
            final double blurSigma = Tween<double>(
              begin: 0.0,
              end: 1.0,
            ).evaluate(_animation);
            return Opacity(
              opacity: Tween<double>(
                begin: 1.0,
                end: 0.5,
              ).evaluate(_animation),
              child: ImageFiltered(
                imageFilter: ui.ImageFilter.blur(
                  sigmaX: blurSigma,
                  sigmaY: blurSigma,
                ),
                child: child!,
              ),
            );
          },
        ),
      ),
    );
  }
}

extension on ThemeData {
  Duration get animationDuration => const Duration(milliseconds: 300);

  Curve get animationCurve => Curves.linearToEaseOut;
}