import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class TouchHintWidget extends HookWidget {
  const TouchHintWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(
      duration: const Duration(milliseconds: 500),
    );
    final colorTween = ColorTween(begin: Colors.white.withOpacity(0.2), end: Colors.white.withOpacity(0.5));
    final scaleTween = Tween(begin: 0.8, end: 1.0);
    useEffect(() {
      controller.forward();
      void onStateChange(AnimationStatus state) {
        if (state == AnimationStatus.completed) {
          controller.reverse();
        } else if (state == AnimationStatus.dismissed){
          controller.forward();
        }
      }
      controller.addStatusListener(onStateChange);
      return () {
        controller.removeStatusListener(onStateChange);
      };
    }, [controller]);
    return AnimatedBuilder(
      animation: controller,
      builder: (context, _) => Transform.scale(
          scale: scaleTween.evaluate(controller),
          child: Container(
            width: 84.h,
            height: 84.h,
            decoration: ShapeDecoration(
              shape: const CircleBorder(),
              gradient: RadialGradient(
                colors: [
                  Colors.white.withOpacity(0.5),
                  colorTween.evaluate(controller)!,
                  Colors.transparent,
                ]
              ),
            ),
          ),
        )
    );
  }
}