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/consts.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/button/default_button.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 == 0) {
      if (gapImage == null) {
        return Image.asset(MyLottieConsts.congratsGif, height: 200);
      }
      return Image.network(ApiConsts.marathonBaseUrlServices + gapImage, height: 200);
    }
    return Image.asset(MyLottieConsts.congratsGif, height: 200);
  }

  Widget getDemoWinnerWidget(BuildContext context, {required MarathonProvider provider}) {
    return provider.isUserOutOfGame
        ? Column(
            children: <Widget>[
              Lottie.asset(MyLottieConsts.noWinnerLottie),
              Center(
                child: LocaleKeys.noWinner.tr().toText18(color: MyColors.grey3AColor, isCentered: true),
              ),
            ],
          )
        : Stack(
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  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),
                        )
                      ],
                    ),
                  ),
                  16.height,
                  Column(
                    children: <Widget>[
                      displayLocalizedContent(
                        isPhoneLangArabic: AppState().isArabic(context),
                        selectedLanguage: provider.demoMarathonDetailModel.selectedLanguage!,
                        arabicContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEAr ?? "",
                        englishContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEEn ?? "",
                      ).toText22(
                        color: MyColors.grey3AColor,
                        isCentered: true,
                      ),
                      8.height,
                      AppState().memberInformationList!.eMPLOYEENUMBER!.toText22(color: MyColors.grey57Color),
                    ],
                  ),
                  60.height,
                  if (provider.demoMarathonDetailModel.sponsors != null && provider.demoMarathonDetailModel.sponsors!.isNotEmpty) ...<Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        "${LocaleKeys.sponsoredBy.tr()} ".toText14(color: MyColors.grey77Color),
                        displayLocalizedContent(
                          isPhoneLangArabic: AppState().isArabic(context),
                          selectedLanguage: provider.demoMarathonDetailModel.selectedLanguage!,
                          englishContent: provider.demoMarathonDetailModel.sponsors!.first.nameEn!,
                          arabicContent: provider.demoMarathonDetailModel.sponsors!.first.nameAr!,
                        ).toText14(
                          color: MyColors.darkTextColor,
                          isBold: true,
                        ),
                      ],
                    ),
                    5.height,
                    Image.network(
                      ApiConsts.marathonBaseUrlServices + provider.demoMarathonDetailModel.sponsors!.first.logo!,
                      height: 50,
                      width: 150,
                      fit: BoxFit.contain,
                      errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
                        return Image.asset("assets/images/logos/main_mohemm_logo.png", height: 50, width: 150);
                      },
                    )
                  ],
                ],
              ),
              Lottie.asset(MyLottieConsts.celebrate1Lottie),
            ],
          );
  }

  Widget getWinnerWidget(BuildContext context, {required MarathonProvider provider}) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
      child: (AppState().getIsDemoMarathon)
          ? getDemoWinnerWidget(context, provider: provider)
          : provider.selectedWinners == null || (provider.selectedWinners!.isEmpty && !provider.iAmWinner)
              ? Column(
                  children: <Widget>[
                    Lottie.asset(MyLottieConsts.noWinnerLottie),
                    Center(
                      child: LocaleKeys.noWinner.tr().toText18(color: MyColors.grey3AColor, isCentered: true),
                    ),
                  ],
                )
              : Stack(
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        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: ((provider.selectedWinners!.length == 1 && !provider.iAmWinner) || (provider.selectedWinners!.isEmpty && provider.iAmWinner)
                                        ? LocaleKeys.winner.tr()
                                        : LocaleKeys.winners.tr())
                                    .toText32(color: MyColors.white, isBold: true, isCentered: true)
                                    .paddingOnly(top: 07),
                              )
                            ],
                          ),
                        ),
                        16.height,
                        provider.iAmWinner
                            ? Column(
                                children: <Widget>[
                                  displayLocalizedContent(
                                    isPhoneLangArabic: AppState().isArabic(context),
                                    selectedLanguage: provider.marathonDetailModel.selectedLanguage ?? 0,
                                    arabicContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEAr ?? "",
                                    englishContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEEn ?? "",
                                  ).toText24(
                                    color: MyColors.grey3AColor,
                                    isCentered: true,
                                  ),
                                  8.height,
                                  AppState().memberInformationList!.eMPLOYEENUMBER!.toText22(color: MyColors.grey57Color),
                                ],
                              )
                            : const SizedBox(),
                        if (provider.selectedWinners != null) ...<Widget>[
                          provider.selectedWinners!.length == 1 && !provider.iAmWinner
                              ? Column(
                                  children: <Widget>[
                                    displayLocalizedContent(
                                      isPhoneLangArabic: AppState().isArabic(context),
                                      selectedLanguage: provider.marathonDetailModel.selectedLanguage ?? 0,
                                      arabicContent: provider.selectedWinners![0].nameAr ?? "",
                                      englishContent: provider.selectedWinners![0].nameEn ?? "",
                                    ).toText24(
                                      color: MyColors.grey3AColor,
                                      isCentered: true,
                                    ),
                                    8.height,
                                    provider.selectedWinners![0].employeeId!.toText22(color: MyColors.grey57Color),
                                  ],
                                )
                              : ListView.separated(
                                  shrinkWrap: true,
                                  itemCount: provider.selectedWinners!.length,
                                  separatorBuilder: (BuildContext context, int index) {
                                    return const Divider();
                                  },
                                  itemBuilder: (BuildContext context, int index) {
                                    return Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: <Widget>[
                                        displayLocalizedContent(
                                          isPhoneLangArabic: AppState().isArabic(context),
                                          selectedLanguage: provider.marathonDetailModel.selectedLanguage ?? 0,
                                          arabicContent: provider.selectedWinners![index].nameAr ?? "",
                                          englishContent: provider.selectedWinners![index].nameEn ?? "",
                                        ).toText16(
                                          color: MyColors.grey3AColor,
                                        ),
                                        provider.selectedWinners![index].employeeId!.toText16(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),
                              displayLocalizedContent(
                                isPhoneLangArabic: AppState().isArabic(context),
                                selectedLanguage: provider.marathonDetailModel.selectedLanguage!,
                                arabicContent: provider.marathonDetailModel.sponsors!.first.nameAr ?? "",
                                englishContent: provider.marathonDetailModel.sponsors!.first.nameEn ?? "",
                              ).toText14(
                                color: MyColors.darkTextColor,
                                isBold: true,
                              ),
                            ],
                          ),
                          5.height,
                          Image.network(
                            ApiConsts.marathonBaseUrlServices + provider.marathonDetailModel.sponsors!.first.logo!,
                            height: 50,
                            width: 150,
                            fit: BoxFit.contain,
                            errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
                              return Image.asset("assets/images/logos/main_mohemm_logo.png", height: 50, width: 150);
                            },
                          )
                        ],
                      ],
                    ),
                    Lottie.asset(MyLottieConsts.celebrate1Lottie),
                  ],
                ),
    );
  }

  Widget getNameContainer(BuildContext context, MarathonProvider provider) {
    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>[
          displayLocalizedContent(
            isPhoneLangArabic: AppState().isArabic(context),
            selectedLanguage: (!AppState().getIsDemoMarathon ? provider.marathonDetailModel.selectedLanguage : provider.demoMarathonDetailModel.selectedLanguage) ?? 0,
            arabicContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEAr ?? "",
            englishContent: 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();
              provider.getMarathonDetailsFromApi();
              Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
            } else {
              showDialog(
                context: context,
                builder: (BuildContext context) => ConfirmDialog(
                  message: LocaleKeys.youWantToLeaveMarathon.tr(),
                  onTap: () {
                    provider.resetValues();
                    provider.getMarathonDetailsFromApi();
                    Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
                  },
                ),
              );
            }
          },
          onBackTapped: () {
            if (provider.questionCardStatus == QuestionCardStatus.winnerFound) {
              provider.resetValues();
              provider.getMarathonDetailsFromApi();
              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: Column(
          children: <Widget>[
            ListView(
              children: <Widget>[
                10.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 && !provider.isUserOutOfGame) ...<Widget>[
                  getNameContainer(context, provider),
                ],
                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.gapTimeType, gapImage: provider.gapTimeImage, gapText: provider.gapTimeText),
                    title: LocaleKeys.congrats.tr().toText22(color: MyColors.greenColor),
                    subTitle: LocaleKeys.yourAnswerCorrect.tr().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, reverse: false, repeat: true),
                    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),
              ],
            ).expanded,
            provider.questionCardStatus == QuestionCardStatus.winnerFound
                ? DefaultButton(LocaleKeys.ok.tr(), () {
                    provider.resetValues();
                    provider.getMarathonDetailsFromApi();
                    Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
                  }).insideContainer
                : const SizedBox()
          ],
        ),
      ),
      onWillPop: () {
        showDialog(
          context: context,
          builder: (BuildContext context) => ConfirmDialog(
            message: LocaleKeys.youWantToLeaveMarathon.tr(),
            onTap: () {
              provider.resetValues();
              Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
            },
          ),
        );
        return Future<bool>.value(false);
      },
    );
  }
}