fluffychat/lib/pangea/common/widgets/pressable_button.dart

import 'dart:async';

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

import 'package:fluffychat/pangea/common/utils/play_click_sound.dart';

class PressableButton extends StatefulWidget {
  final BorderRadius borderRadius;
  final double buttonHeight;
  final bool depressed;
  final Color color;
  final Widget Function(BuildContext context, bool depressed, Color shadowColor)
      builder;

  final void Function()? onPressed;
  final Stream? triggerAnimation;
  final bool playSound;

  final double colorFactor;
  final bool visible;

  const PressableButton({
    required this.borderRadius,
    required this.builder,
    required this.onPressed,
    required this.color,
    this.buttonHeight = 4,
    this.depressed = false,
    this.triggerAnimation,
    this.playSound = false,
    this.colorFactor = 0.3,
    this.visible = true,
    super.key,
  });

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

class PressableButtonState extends State<PressableButton>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _tweenAnimation;
  Completer<void>? _animationCompleter;
  StreamSubscription? _triggerAnimationSubscription;
  final ClickPlayer clickPlayer = ClickPlayer();

  // seperate the widget's depressed state from the internal
  // state to enable animations when this changes
  bool _depressed = false;

  @override
  void initState() {
    super.initState();
    _depressed = widget.depressed;
    _controller = AnimationController(
      duration: const Duration(milliseconds: 100),
      vsync: this,
    );
    _tweenAnimation =
        Tween<double>(begin: 0, end: widget.buttonHeight).animate(_controller);

    if (!_depressed) {
      _triggerAnimationSubscription = widget.triggerAnimation?.listen((_) {
        _animationCompleter = Completer<void>();
        _animateUp();
        _animateDown();
      });
    }
  }

  @override
  void didUpdateWidget(PressableButton oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (_depressed && !widget.depressed) {
      _controller.forward().then((_) {
        _depressed = widget.depressed;
        _controller.reverse();
      });
    } else if (!_depressed && widget.depressed) {
      _controller.forward().then((_) {
        _depressed = widget.depressed;
      });
    }
  }

  // bool get _isLightMode => Theme.of(context).brightness == Brightness.light;

  void _onTapDown(TapDownDetails? details) {
    if (_depressed) return;
    _animationCompleter = Completer<void>();
    if (!mounted) return;
    _animateUp();
  }

  void _animateUp() {
    if (_depressed || !mounted) return;
    _controller.forward().then((_) {
      _animationCompleter?.complete();
      _animationCompleter = null;
    });
  }

  Future<void> _onTapUp(TapUpDetails? details) async {
    if (_animationCompleter != null) {
      await _animationCompleter!.future;
    }
    widget.onPressed?.call();
    if (_depressed) return;
    await _animateDown();
  }

  Future<void> _animateDown() async {
    if (_animationCompleter != null) {
      await _animationCompleter!.future;
    }
    if (widget.playSound) clickPlayer.play();
    if (!kIsWeb) {
      HapticFeedback.mediumImpact();
    }
    if (mounted) _controller.reverse();
  }

  void _onTapCancel() {
    if (_depressed) return;
    if (mounted) _controller.reverse();
  }

  @override
  void dispose() {
    _controller.dispose();
    _triggerAnimationSubscription?.cancel();
    clickPlayer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final shadowColor = Color.alphaBlend(
      Colors.black.withAlpha(
        (255 * widget.colorFactor).round(),
      ),
      widget.color,
    );

    if (!widget.visible) {
      return widget.builder(context, _depressed, shadowColor);
    }

    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: GestureDetector(
        onTapDown: _onTapDown,
        onTapUp: _onTapUp,
        onTapCancel: _onTapCancel,
        child: AnimatedBuilder(
          animation: _tweenAnimation,
          builder: (context, child) {
            return Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Flexible(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      SizedBox(
                        height: _depressed
                            ? widget.buttonHeight
                            : _tweenAnimation.value,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          color: shadowColor,
                          borderRadius: widget.borderRadius,
                        ),
                        padding: EdgeInsets.only(
                          bottom: !_depressed
                              ? widget.buttonHeight - _tweenAnimation.value
                              : 0,
                        ),
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: widget.borderRadius,
                          ),
                          child: widget.builder(
                            context,
                            _depressed || _tweenAnimation.value > 0,
                            shadowColor,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}