import 'dart:async';

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:lottie/lottie.dart';
import 'package:mohem_flutter_app/app_state/app_state.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/decorations_helper.dart';
import 'package:mohem_flutter_app/classes/lottie_consts.dart';
import 'package:mohem_flutter_app/config/routes.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/models/marathon/question_model.dart';
import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/custom_status_widget.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_progress_container.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_qualifiers_container.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/question_card.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/question_card_builder.dart';
import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
import 'package:mohem_flutter_app/widgets/dialogs/confirm_dialog.dart';
import 'package:provider/provider.dart';

class MarathonScreen extends StatelessWidget {
  const MarathonScreen({Key? key}) : super(key: key);

  Widget getSuccessWidget({required int? gapType, required String? gapImage, required String? gapText}) {
    if (gapType == 1) {
      if (gapText == null) {
        return Image.asset(MyLottieConsts.congratsGif, height: 200);
      }
      return gapText.toText18(color: MyColors.darkTextColor, isCentered: true);
    }
    if (gapType == 2) {
      if (gapImage == null) {
        return Image.asset(MyLottieConsts.congratsGif, height: 200);
      }
      return Image.network(gapImage, height: 200);
    }
    return Image.asset(MyLottieConsts.congratsGif, height: 200);
  }

  Widget getWinnerWidget(BuildContext context, {required MarathonProvider provider}) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            height: 200,
            child: Stack(
              children: <Widget>[
                Lottie.asset(MyLottieConsts.celebrate1Lottie, height: 200),
                Lottie.asset(MyLottieConsts.celebrate2Lottie, height: 200),
              ],
            ),
          ),
          26.height,
          SizedBox(
            height: 50,
            child: Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.center,
                  child: SvgPicture.asset("assets/images/winner_ribbon.svg", height: 50),
                ),
                Align(
                  alignment: Alignment.center,
                  child: LocaleKeys.winner.tr().toText32(color: MyColors.white, isBold: true, isCentered: true).paddingOnly(top: 07),
                )
              ],
            ),
          ),
          12.height,
          if (provider.selectedWinners != null) ...<Widget>[
            (AppState().isArabic(context) ? provider.selectedWinners!.first.nameEn : provider.selectedWinners!.first.nameEn)!.toText22(
              color: MyColors.grey3AColor,
              isCentered: true,
            ),
            8.height,
            provider.selectedWinners!.first.employeeId!.toText22(color: MyColors.grey57Color),
          ],
          60.height,
          if (provider.marathonDetailModel.sponsors != null && provider.marathonDetailModel.sponsors!.isNotEmpty) ...<Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                "${LocaleKeys.sponsoredBy.tr()} ".toText14(color: MyColors.grey77Color),
                (AppState().isArabic(context) ? provider.marathonDetailModel.sponsors!.first.nameAr ?? "" : provider.marathonDetailModel.sponsors!.first.nameEn ?? "").toText14(
                  color: MyColors.darkTextColor,
                  isBold: true,
                ),
              ],
            ),
            5.height,
            Image.network(
              provider.marathonDetailModel.sponsors!.first.image!,
              height: 40,
              width: 150,
              fit: BoxFit.fill,
              errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
                return const Center();
              },
            )
          ],
        ],
      ),
    );
  }

  Widget getNameContainer(BuildContext context) {
    return Container(
      height: 50,
      padding: const EdgeInsets.symmetric(horizontal: 20),
      decoration: BoxDecoration(
        color: MyColors.greenColor,
        borderRadius: BorderRadius.circular(15),
        boxShadow: <BoxShadow>[BoxShadow(color: const Color(0xff000000).withOpacity(.05), blurRadius: 26, offset: const Offset(0, -3))],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          (AppState().isArabic(context) ? AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEAr! : AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEEn!)
              .toText17(isBold: true, color: MyColors.white),
          AppState().memberInformationList!.eMPLOYEENUMBER!.toText17(isBold: true, color: MyColors.white),
        ],
      ),
    ).paddingOnly(left: 20, right: 20, top: 12, bottom: 10);
  }

  @override
  Widget build(BuildContext context) {
    MarathonProvider provider = context.watch<MarathonProvider>();
    return WillPopScope(
      child: Scaffold(
        appBar: AppBarWidget(
          context,
          title: LocaleKeys.brainMarathon.tr(),
          onHomeTapped: () {
            if (provider.questionCardStatus == QuestionCardStatus.winnerFound) {
              provider.resetValues();
              Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
            } else {
              showDialog(
                context: context,
                builder: (BuildContext context) => ConfirmDialog(
                  message: LocaleKeys.youWantToLeaveMarathon.tr(),
                  onTap: () {
                    provider.resetValues();
                    Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
                  },
                ),
              );
            }
          },
          onBackTapped: () {
            if (provider.questionCardStatus == QuestionCardStatus.winnerFound) {
              provider.resetValues();
              Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
            } else {
              showDialog(
                context: context,
                builder: (BuildContext context) => ConfirmDialog(
                  message: LocaleKeys.youWantToLeaveMarathon.tr(),
                  onTap: () {
                    provider.resetValues();
                    Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
                  },
                ),
              );
            }
          },
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              20.height,
              if (provider.questionCardStatus == QuestionCardStatus.findingWinner) ...<Widget>[
                QualifiersContainer(provider: provider).paddingOnly(left: 21, right: 21),
              ] else if (provider.questionCardStatus == QuestionCardStatus.winnerFound)
                ...<Widget>[]
              else ...<Widget>[
                MarathonProgressContainer(provider: provider).paddingOnly(left: 21, right: 21),
              ],
              if (provider.questionCardStatus == QuestionCardStatus.findingWinner) ...<Widget>[
                getNameContainer(context),
              ],
              QuestionCardBuilder(
                onQuestion: (BuildContext context) => const QuestionCard(),
                onCompleted: (BuildContext context) => CustomStatusWidget(
                  asset: Lottie.asset(MyLottieConsts.allQuestions, height: 200),
                  title: LocaleKeys.congrats.tr().toText22(color: MyColors.greenColor),
                  subTitle: LocaleKeys.allQuestionsCorrect.toText18(color: MyColors.darkTextColor, isCentered: true),
                ),
                onCorrectAnswer: (BuildContext context) => CustomStatusWidget(
                  asset: getSuccessWidget(gapType: provider.currentQuestion.gapType, gapImage: provider.currentQuestion.gapImage, gapText: provider.currentQuestion.gapText),
                  title: LocaleKeys.congrats.tr().toText22(color: MyColors.greenColor),
                  subTitle: LocaleKeys.yourAnswerCorrect.toText18(color: MyColors.darkTextColor, isCentered: true),
                ),
                onWinner: (BuildContext context) => getWinnerWidget(context, provider: provider),
                onWrongAnswer: (BuildContext context) => CustomStatusWidget(
                  asset: Image.asset(MyLottieConsts.wrongAnswerGif, height: 200),
                  title: LocaleKeys.oops.tr().toText22(color: MyColors.redColor),
                  subTitle: LocaleKeys.wrongAnswer.tr().toText18(color: MyColors.darkTextColor, isCentered: true),
                ),
                onSkippedAnswer: (BuildContext context) => CustomStatusWidget(
                  asset: Image.asset(MyLottieConsts.wrongAnswerGif, height: 200),
                  title: LocaleKeys.oops.tr().toText22(color: MyColors.redColor),
                  subTitle: LocaleKeys.youMissedTheQuestion.tr().toText18(color: MyColors.darkTextColor, isCentered: true),
                ),
                onFindingWinner: (BuildContext context) => CustomStatusWidget(
                  asset: Lottie.asset(MyLottieConsts.winnerLottie, height: 168),
                  title: LocaleKeys.fingersCrossed.tr().toText22(color: MyColors.greenColor),
                  subTitle: LocaleKeys.winnerSelectedRandomly.tr().toText18(color: MyColors.darkTextColor, isCentered: true),
                ),
                questionCardStatus: provider.questionCardStatus,
              ).paddingOnly(top: 12, left: 21, right: 21),
            ],
          ),
        ),
      ),
      onWillPop: () {
        provider.resetValues();
        return Future<bool>.value(true);
      },
    );
  }
}