import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';

import '../utils/colors.dart';

class CustomLoader extends StatefulWidget {
  /// Size of the logo.
  final double logoSize;

  /// Size (diameter) of each animated dot.
  final double dotSize;

  /// Color of the animated dots.
  final Color dotColor;

  /// Duration for the dot animations.
  final Duration animationDuration;

  const CustomLoader({
    Key? key,
    this.logoSize = 50.0,
    this.dotSize = 8.0,
    this.dotColor = AppColors.primaryColor,
    this.animationDuration = const Duration(milliseconds: 1200),
  }) : super(key: key);

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

class _CustomLoaderState extends State<CustomLoader>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _dot1Animation;
  late final Animation<double> _dot2Animation;
  late final Animation<double> _dot3Animation;

  @override
  void initState() {
    super.initState();
    // Set up the animation controller to repeat indefinitely.
    _controller = AnimationController(
      vsync: this,
      duration: widget.animationDuration,
    )..repeat();

    // Create staggered fade animations for the three dots.
    _dot1Animation = Tween<double>(begin: 0.3, end: 1.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(0.0, 0.7, curve: Curves.easeInOut),
      ),
    );
    _dot2Animation = Tween<double>(begin: 0.3, end: 1.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(0.2, 0.9, curve: Curves.easeInOut),
      ),
    );
    _dot3Animation = Tween<double>(begin: 0.3, end: 1.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(0.4, 1.0, curve: Curves.easeInOut),
      ),
    );
  }

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

  /// Builds a single animated dot using a [FadeTransition].
  Widget _buildDot(Animation<double> animation) {
    return FadeTransition(
      opacity: animation,
      child: Container(
        width: widget.dotSize,
        height: widget.dotSize,
        margin: const EdgeInsets.symmetric(horizontal: 4.0),
        decoration: BoxDecoration(
          color: widget.dotColor,
          shape: BoxShape.circle,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // Display the logo.
        Image.asset(
          "assets/images/wanislogoweb.png",
          width: widget.logoSize,
          height: widget.logoSize,
        ),
        const SizedBox(height: 10),
        // Animated dots row.
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildDot(_dot1Animation),
            _buildDot(_dot2Animation),
            _buildDot(_dot3Animation),
          ],
        ),
      ],
    );
  }
}