import 'package:aitrainer_app/bloc/timer/timer_bloc.dart';
import 'package:aitrainer_app/util/common.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:aitrainer_app/library/liquid_progress_indicator/liquid_linear_progress_indicator.dart';

class AppBarProgress extends StatefulWidget implements PreferredSizeWidget {
  final int max;
  final int min;
  const AppBarProgress({required this.max, required this.min});

  @override
  _AppBarNav createState() => _AppBarNav();

  @override
  Size get preferredSize => const Size.fromHeight(50);
}

class _AppBarNav extends State<AppBarProgress> with SingleTickerProviderStateMixin, Common {
  late AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
      lowerBound: (widget.min).toDouble(),
      upperBound: (widget.max).toDouble(),
      vsync: this,
      duration: Duration(seconds: 3),
    );

    _animationController.addListener(() => setState(() {}));
    _animationController.forward();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    // ignore: close_sinks
    final TimerBloc timerBloc = BlocProvider.of<TimerBloc>(context);

    return AppBar(
        backgroundColor: Colors.black,
        title: getAnimatedWidget(),
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => {timerBloc.add(TimerEnd(duration: 0)), Navigator.of(context).pop()},
        ));
  }

  Widget getAnimatedWidget() {
    final percentage = _animationController.value;
    return Container(
        width: double.infinity,
        height: 35,
        padding: EdgeInsets.symmetric(horizontal: 24.0),
        child: LiquidLinearProgressIndicator(
          value: _animationController.value / 100,
          backgroundColor: Colors.black,
          valueColor: AlwaysStoppedAnimation(Color(0xffb4f500)),
          borderRadius: 12.0,
          center: Text(
            "${percentage.toStringAsFixed(0)}%",
            style: TextStyle(
              color: Colors.yellow[50],
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ));
  }
}