import 'package:flutter/material.dart';
import 'package:tm_app/core/theme/colors.dart';

import '../../core/utils/size_config.dart';

class ProgressBarColumn extends StatefulWidget {
  const ProgressBarColumn({
    required this.text,
    required this.value,
    required this.amount,
    this.circularProgressIndicatorWidth,
    this.circularProgressIndicatorHeight,
    this.strokeWidth,
    super.key,
  });

  final String text;
  final double value;
  final String amount;
  final double? circularProgressIndicatorWidth;
  final double? circularProgressIndicatorHeight;
  final double? strokeWidth;

  @override
  State<ProgressBarColumn> createState() => _ProgressBarColumnState();
}

class _ProgressBarColumnState extends State<ProgressBarColumn>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    // Initialize the animation controller
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 2000), // duration of the animation
    );

    // Create a Tween animation from 0.0 to 0.75
    _animation = Tween<double>(
      begin: 0.0,
      end: widget.value / 100,
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));

    // Start the animation
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose(); // clean up controller
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Stack(
          alignment: Alignment.center,
          children: [_progressIndicator(), _centerText()],
        ),
        SizedBox(height: 12.0.h()),
        _titleText(),
      ],
    );
  }

  Widget _progressIndicator() {
    return SizedBox(
      width: widget.circularProgressIndicatorWidth ?? 96.0.w(),
      height: widget.circularProgressIndicatorHeight ?? 96.0.w(),
      child: AnimatedBuilder(
        animation: _animation,
        builder:
            (context, child) => CircularProgressIndicator(
              backgroundColor: AppColors.grey10,
              strokeCap: StrokeCap.round,
              strokeWidth: widget.strokeWidth ?? 6.0,
              valueColor: const AlwaysStoppedAnimation<Color>(
                AppColors.jellyBean,
              ),
              value: _animation.value,
            ),
      ),
    );
  }

  Widget _centerText() {
    return Center(
      child: Text(
        '${double.parse(widget.amount).round()}%',
        style: TextStyle(
          fontSize: 24.0.sp(),
          fontWeight: FontWeight.bold,
          color: AppColors.titleColor,
        ),
        textAlign: TextAlign.center,
      ),
    );
  }

  Widget _titleText() {
    return Text(
      widget.text,
      style: TextStyle(
        fontSize: 16.0.sp(),
        fontWeight: FontWeight.bold,
        color: AppColors.titleColor,
      ),
    );
  }
}