import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.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/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/ui/marathon/marathon_provider.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 MarathonWaitingScreen extends StatelessWidget {
  const MarathonWaitingScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    MarathonProvider provider = context.watch<MarathonProvider>();
    return WillPopScope(
      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);
      },
      child: Scaffold(
        appBar: AppBarWidget(
          context,
          title: LocaleKeys.brainMarathon.tr(),
          onHomeTapped: () {
            showDialog(
              context: context,
              builder: (BuildContext context) => ConfirmDialog(
                message: LocaleKeys.youWantToLeaveMarathon.tr(),
                onTap: () {
                  provider.resetValues();
                  Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
                },
              ),
            );
          },
          onBackTapped: () {
            showDialog(
              context: context,
              builder: (BuildContext context) => ConfirmDialog(
                message: LocaleKeys.youWantToLeaveMarathon.tr(),
                onTap: () {
                  provider.resetValues();
                  Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
                },
              ),
            );
          },
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: double.infinity,
              margin: const EdgeInsets.all(21),
              decoration: MyDecorations.shadowDecoration,
              child: Stack(
                children: <Widget>[
                  Align(
                    child: Lottie.asset(MyLottieConsts.marathonWaiting, height: 200),
                  ),
                  Align(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        LocaleKeys.startingIn.tr().toText16(),
                        provider.totalSecondsToWaitForMarathon.toString().toText18(color: provider.totalSecondsToWaitForMarathon < 5 ? MyColors.redColor : MyColors.black),
                      ],
                    ),
                  ),
                  Align(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        InkWell(
                          onTap: () {
                            provider.callNextQuestionApi();
                            provider.timerToWaitForMarathon.cancel();
                          },
                          child: "Join Now".toText16(),
                        ).paddingOnly(bottom: 20),
                      ],
                    ),
                  ),
                ],
              ),
            ).expanded,
          ],
        ),
      ),
    );
  }
}
