import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:lottie/lottie.dart';
import 'package:muaawana/providers/request_status_provider.dart';

import '../../../config/app_constant.dart';
import '../../../config/provider.dart';
import '../../../config/size.dart';
import '../../../config/style.dart';
import '../../../providers/rating_provider.dart';
import '../../../utils/text_style.dart';
import '../../../utils/text_widget.dart';
import '../../../widgets/custom_botton_widget.dart';
import '../../../widgets/home_indicator_widget.dart';
import 'alert_dialog_custom_widget.dart';

class RatingScreen extends StatefulWidget {
  const RatingScreen(
      {Key? key,
      required this.bookingType,
      required this.id,
      this.technicianId})
      : super(key: key);
  final BookingType bookingType;
  final int id;
  final int? technicianId;

  @override
  State<RatingScreen> createState() => _RatingScreenState();
}

class _RatingScreenState extends State<RatingScreen>
    with TickerProviderStateMixin {
  final hm = SizeConfig.heightMultiplier;
  final wm = SizeConfig.widthMultiplier;
  final tm = SizeConfig.textMultiplier;

  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    final alertDialogState = Provider.of<RatingDialogBoxProvider>(context);
    return Scaffold(
      backgroundColor: AppStyle.appBackground,
      body: SingleChildScrollView(
        child: SizedBox(
          height: hm * 100,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: EdgeInsets.only(top: hm * 7),
                child: Image.asset(
                  Consts.appLogo,
                  height: 77,
                ),
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Lottie.asset(
                      Consts.starAnimation,
                      height: hm * 25,
                      width: hm * 25,
                      controller: _controller,
                      repeat: true,
                      onLoaded: (composition) {
                        _controller
                          ..duration = composition.duration
                          ..forward()
                          ..repeat();
                      },
                    ),
                    Txt(
                      text: "Please rate your service provider",
                      style: tS(
                        "lato_bold",
                        14,
                        FontWeight.bold,
                        AppStyle.black,
                      ),
                    ),
                    SizedBox(height: hm * 2.1),
                    SizedBox(
                      width: wm * 40,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          GestureDetector(
                              onTap: () {
                                alertDialogState.updateRating(1);
                              },
                              child: SvgPicture.asset(
                                alertDialogState.rating >= 1
                                    ? Consts.filledStarIcon
                                    : Consts.emptyStarIcon,
                                height: wm * 5,
                              )),
                          GestureDetector(
                              onTap: () {
                                alertDialogState.updateRating(2);
                              },
                              child: SvgPicture.asset(
                                alertDialogState.rating >= 2
                                    ? Consts.filledStarIcon
                                    : Consts.emptyStarIcon,
                                height: wm * 5,
                              )),
                          GestureDetector(
                              onTap: () {
                                alertDialogState.updateRating(3);
                              },
                              child: SvgPicture.asset(
                                alertDialogState.rating >= 3
                                    ? Consts.filledStarIcon
                                    : Consts.emptyStarIcon,
                                height: wm * 5,
                              )),
                          GestureDetector(
                              onTap: () {
                                alertDialogState.updateRating(4);
                              },
                              child: SvgPicture.asset(
                                alertDialogState.rating >= 4
                                    ? Consts.filledStarIcon
                                    : Consts.emptyStarIcon,
                                height: wm * 5,
                              )),
                          GestureDetector(
                              onTap: () {
                                alertDialogState.updateRating(5);
                              },
                              child: SvgPicture.asset(
                                alertDialogState.rating >= 5
                                    ? Consts.filledStarIcon
                                    : Consts.emptyStarIcon,
                                height: wm * 5,
                              )),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: hm * 2.1,
                    ),
                    GestureDetector(
                      onTap: () {
                        showDialog(
                            barrierColor: AppStyle.gradientStart,
                            context: context,
                            builder: (context) {
                              return AlertDialogWidget(
                                isProduct:
                                    widget.bookingType == BookingType.product,
                                id: widget.id,
                                technicianId: widget.technicianId,
                              );
                            });
                      },
                      child: const CustomButtonWidget(
                        height: 35,
                        width: 80,
                        borderRadius: 25,
                        fontSize: 13,
                        fillColor: AppStyle.buttonBlue,
                        borderColor: AppStyle.buttonBlue,
                        textColor: AppStyle.white,
                        text: 'Send',
                        fontFamily: 'lato-regular',
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    SizedBox(height: hm * 8),
                  ],
                ),
              ),
              SizedBox(child: HomeIndicatorBottomWidget()),
            ],
          ),
        ),
      ),
    );
  }
}