import 'dart:async';
import 'dart:math';

import 'package:design/design.dart';
import 'package:guru_widgets/assetbar/guru_asset_bar.dart';
import 'package:guru_widgets/theme/guru_theme.dart';
import 'package:flutter_animate/flutter_animate.dart';

// part 'guru_gem_overlay.g.dart';

// @DesignSpec(width: 750, height: 1624)
// abstract class GuruGemOverlayDesignSpec implements BasicDesignSpec {
//   @SpecHeight(98)
//   double get navigationBarHeight;

//   static GuruGemOverlayDesignSpec create(Size size,
//           {Offset offset = Offset.zero}) =>
//       _GuruGemOverlayDesignSpec.from(size, offset: offset);
// }

class GemModel {
  final Duration duration;
  final Duration delay;

  const GemModel(this.duration, this.delay);
}

class GuruGemsOverlayTheme {
  final String? icon;
  final List<GemModel> gems;
  final Duration fadeOutDuration;
  final Duration textDuration;
  final Duration textDelay;

  const GuruGemsOverlayTheme(
      {this.icon,
      this.gems = const [
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 0)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 50)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 100)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 150)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 200)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 250)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 300)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 150)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 200)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 250)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 300)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 150)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 200)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 250)),
        GemModel(Duration(milliseconds: 1400), Duration(milliseconds: 300))
      ],
      this.fadeOutDuration = const Duration(milliseconds: 0),
      this.textDuration = const Duration(milliseconds: 750),
      this.textDelay = const Duration(milliseconds: 300)});
}

class GuruGemOverlayWidget extends StatefulWidget {
  final String? text;
  final Completer completer;

  const GuruGemOverlayWidget({
    Key? key,
    this.text,
    required this.completer,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => GuruGemOverlayState();
}

class GuruGemOverlayState extends State<GuruGemOverlayWidget> {
  List<Widget> buildGems(GuruGemsOverlayTheme theme) {
    final size = MediaQuery.of(context).size;
    final GuruAssetBarS1DesignSpec designSpec = GuruThemeDesignSpec.get().assetBarS1DesignSpec;

    final List<Widget> items = [];
    for (var gem in theme.gems) {
      final Widget item = theme.icon != null
          ? Image.asset(theme.icon!, width: designSpec.assetIconSize, height: designSpec.assetIconSize)
          : Icon(Icons.stars, size: designSpec.assetIconSize, color: Colors.orangeAccent);
      
      final start = size.width / 2 + Random().nextInt(40) - 20;
      final top = size.height / 2 + Random().nextInt(40) - 20;

      items.add(Positioned.directional(
          textDirection: Directionality.of(context),
          start: start,
          top: top,
           child: item).animate()
            .scaleXY(begin: 0, end: 1.2, duration: 300.ms, delay: gem.delay)
            .moveX(
              curve: Curves.easeIn,
              end: - start + 10,
              duration: gem.duration,
              delay: gem.delay
            )
            .moveY(
              end: -top + 10,
              duration: gem.duration,
              delay: gem.delay,
              curve: const Cubic(1,-0.48,.91,.67)
            )
          );
    }

    return items;
  }

  @override
  Widget build(BuildContext context) {
    final guruTheme = GuruTheme.of(context);
    final theme = guruTheme.gemsOverlayTheme;

    final size = MediaQuery.of(context).size;

    return Stack(
      fit: StackFit.expand,
      children: [
        Positioned.fill(
            child: DecoratedBox(
                decoration:
                    BoxDecoration(color: Colors.black.withOpacity(0.8)))),
        Positioned.directional(
          start: 10,
          top: 10,
          textDirection: Directionality.of(context),
          child: GuruAssetBar(
              style: GuruAssetBarStyle.igc,
              balanceStream: Stream.periodic(
                  const Duration(seconds: 3000), (count) => count * 1000)),
        ),
        ...buildGems(theme),
        Positioned.directional(
                textDirection: Directionality.of(context),
                start: 200,
                child: const Text(
                  "X 80",
                  style: TextStyle(color: Colors.white),
                ))
            .animate(
                onPlay: (controller) {},
                onComplete: (controller) {
                  Future.delayed(const Duration(milliseconds: 2000), () {
                    widget.completer.complete();
                  });
                })
            .fadeOut(curve: Curves.easeOut, delay: 400.ms, duration: 600.ms)
            .moveY(
                begin: size.height / 2,
                end: size.height / 2 - 40,
                duration: theme.textDuration,
                delay: theme.textDelay)
      ],
    );
  }
}
