import 'package:flutter/material.dart';
import 'package:guru_widgets/animation/lottie/lottie_widget.dart';
import 'package:guru_widgets/animation/standard/transform_animation.dart';
import 'dialog_daily_reward_gift_collection_design_model.dart';

class DialogDailyRewardGiftCollectionWidget extends StatefulWidget {
  final TextStyle? coinTextStyle;
  final Image shineImage;
  final String lottieUrl;
  final TextStyle? summaryTextStyle;
  final Color? buttonColor;
  final TextStyle? buttonTextStyle;
  final String buttonText;
  final Widget coinImage;
  final int coinCount;
  final String rewardSummary;
  final VoidCallback? collectionCallback;
  const DialogDailyRewardGiftCollectionWidget(
      {Key? key,
      this.coinTextStyle,
      required this.shineImage,
      this.summaryTextStyle,
      this.buttonColor,
      this.buttonTextStyle,
      required this.buttonText,
      required this.lottieUrl,
      required this.coinImage,
      required this.coinCount,
      required this.rewardSummary, this.collectionCallback})
      : super(key: key);

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

class _DialogDailyRewardGiftCollectionWidgetState extends State<DialogDailyRewardGiftCollectionWidget> {
  DialogDailyRewardCollectionDesignSpec get designSpec => DialogDailyRewardCollectionDesignSpec.get();
  DialogDailyRewardCollectionContentDesignSpec get contentSpec => designSpec.contentSpec;
  int showTimInMillis = 0;

  final GlobalKey<LottieState> _treasureChestKey = GlobalKey<LottieState>();

  final GlobalKey<AnimatedTransformBuilderState> _giftKey = GlobalKey<AnimatedTransformBuilderState>(debugLabel: "gift");

  final GlobalKey<AnimatedTransformBuilderState> _emergeGiftKey = GlobalKey<AnimatedTransformBuilderState>(debugLabel: "emerge");

  final GlobalKey<AnimatedTransformBuilderState> _summaryKey = GlobalKey<AnimatedTransformBuilderState>(debugLabel: "summary");

  final GlobalKey<AnimatedTransformBuilderState> _buttonKey = GlobalKey<AnimatedTransformBuilderState>(debugLabel: "button");

  bool collectRewards = false;
  bool startedCoinAnimation = false;
  @override
  void initState() {
    super.initState();

    Future.delayed(Duration(milliseconds: 1400), () {
      if (mounted) {
        startShowTreasureBoxAnimation();
      }
    });
    showTimInMillis = DateTime.now().millisecondsSinceEpoch;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            width: contentSpec.measuredSize.width,
            // color: Colors.red,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                AnimatedTransformBuilder.single(
                  key: _emergeGiftKey,
                  fromScale: 0.1,
                  toScale: 1,
                  showAfterStarted: true,
                  autoPlay: false,
                  child: Column(
                    children: [
                      Padding(
                        padding: contentSpec.titleInsets,
                        child: Text(
                          '+${widget.coinCount}',
                          style: widget.coinTextStyle ?? TextStyle(fontSize: contentSpec.titleFontSize, color: Colors.white),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: contentSpec.coinTopSpace),
                        child: widget.coinImage,
                      )
                    ],
                  ),
                ),
                SizedBox(
                  child: AnimatedTransformBuilder.single(
                    key: _giftKey,
                    fromOpacity: 0.1,
                    toOpacity: 1.0,
                    onCompleted: (){
                      if(collectRewards){
                        widget.collectionCallback?.call();
                      }
                    },
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        AnimatedTransformBuilder.single(
                            fromAngle: 360,
                            toAngle: 0,
                            duration: const Duration(seconds: 20),
                            repeat: -1,
                            child: SizedBox(width: contentSpec.shineSize, height: contentSpec.shineSize, child: widget.shineImage)),
                        SizedBox(
                          width: contentSpec.rewardWidth,
                          height: contentSpec.rewardHeight,
                          child: LottieWidget(
                            key: _treasureChestKey,
                            uri: widget.lottieUrl,
                            updateCallback: (double progress) {
                              startShowRewardAnimation(progress);
                            },
                            completedCallback: () {},
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                AnimatedTransformBuilder.single(
                  key: _summaryKey,
                  fromScale: 0.1,
                  toScale: 1,
                  showAfterStarted: true,
                  autoPlay: false,
                  child: Text(
                    widget.rewardSummary,
                    style: TextStyle(fontSize: contentSpec.tipFontSize, color: Colors.white),
                  ),
                ),
                SizedBox(
                  height: contentSpec.buttonTopSpace,
                ),
                AnimatedTransformBuilder.single(
                  key: _buttonKey,
                  fromOpacity: 0.1,
                  toOpacity: 1.0,
                  autoPlay: false,
                  delayed: const Duration(milliseconds: 500),
                  child: GestureDetector(
                    onTap: () {
                      startClaimRewardAnimation();
                    },
                    child: Container(
                      alignment: Alignment.center,
                      width: contentSpec.buttonWidth,
                      height: contentSpec.buttonHeight,
                      decoration: BoxDecoration(
                          color: widget.buttonColor ?? Color(0xff008B54), borderRadius: BorderRadius.circular(contentSpec.buttonHeight / 2)),
                      child: Text(
                        widget.buttonText,
                        style: widget.buttonTextStyle ?? TextStyle(fontSize: contentSpec.buttonFontSize, color: Colors.white),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                )
              ],
            )));
  }

  //奖励盒子展示动画--进来就展示
  startShowTreasureBoxAnimation() {
    _treasureChestKey.currentState?.forward();
  }

  //收集过程中展示动画
  startShowRewardAnimation(double fraction) {
    if (fraction > 0.8 && !startedCoinAnimation) {
      startedCoinAnimation = true;
      _emergeGiftKey.currentState?.play();
      _summaryKey.currentState?.play();
      _buttonKey.currentState?.play();
    }
  }

  //收集完，动画回收
  startClaimRewardAnimation() {
    if (collectRewards || !mounted) {
      return;
    }
    collectRewards = true;
    _giftKey.currentState?.scheduleAnimations([
      TransformAnimation(duration: const Duration(milliseconds: 500), curve: Curves.linear, fromOpacity: 1, toOpacity: 0, fromScale: 1.0, toScale: 0.1),
    ], completedBehavior: AnimatedBehavior.hide);

    _emergeGiftKey.currentState?.scheduleAnimations([
      TransformAnimation(duration: const Duration(milliseconds: 100), curve: Curves.linear, fromOpacity: 1, toOpacity: 0, fromScale: 1.0, toScale: 0.1),
    ], completedBehavior: AnimatedBehavior.hide);

    _summaryKey.currentState?.scheduleAnimations([
      TransformAnimation(duration: const Duration(milliseconds: 400), curve: Curves.linear, fromOpacity: 1, toOpacity: 0, fromScale: 1.0, toScale: 0.1),
    ], completedBehavior: AnimatedBehavior.hide);

    _buttonKey.currentState?.scheduleAnimations([
      TransformAnimation(duration: const Duration(milliseconds: 400), curve: Curves.linear, fromOpacity: 1, toOpacity: 0, fromScale: 1.0, toScale: 0.1),
    ], completedBehavior: AnimatedBehavior.hide);
  }
}
