mohemm-flutter-app/lib/ui/marathon/marathon_screen.dart

import 'dart:async';

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/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/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/question_card.dart';
import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
import 'package:provider/provider.dart';
import 'package:sizer/sizer.dart';
import 'package:steps_indicator/steps_indicator.dart';

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

  @override
  Widget build(BuildContext context) {
    MarathonProvider provider = context.watch<MarathonProvider>();
    return WillPopScope(
        child: Scaffold(
          appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
          body: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                20.height,
                MarathonProgressContainer(provider: provider).paddingOnly(left: 21, right: 21),
                if (provider.isMarathonCompleted)
                  InkWell(
                    onTap: () {
                      Navigator.pushReplacementNamed(
                        context,
                        AppRoutes.marathonWinnerSelection,
                      );
                    },
                    child: CustomStatusWidget(
                      asset: Lottie.asset(
                        MyLottieConsts.allQuestions,
                        height: 200,
                      ),
                      title: Text(
                        LocaleKeys.congrats.tr(),
                        style: const TextStyle(
                          height: 23 / 24,
                          color: MyColors.greenColor,
                          fontSize: 27,
                          letterSpacing: -1,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      subTitle: Text(
                        LocaleKeys.allQuestionsCorrect.tr(),
                        textAlign: TextAlign.center,
                        style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: MyColors.darkTextColor, letterSpacing: -1.08),
                      ),
                    ).paddingOnly(top: 12, left: 21, right: 21),
                  )
                else
                  QuestionCard(provider: provider).paddingOnly(top: 12, left: 21, right: 21),
              ],
            ),
          ),
        ),
        onWillPop: () {
          provider.resetValues();
          return Future<bool>.value(true);
        });
  }
}

class MarathonProgressContainer extends StatefulWidget {
  final MarathonProvider provider;

  const MarathonProgressContainer({Key? key, required this.provider}) : super(key: key);

  @override
  State<MarathonProgressContainer> createState() => _MarathonProgressContainerState();
}

class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
  @override
  void initState() {
    scheduleMicrotask(() {
      widget.provider.startTimer(context);
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      padding: const EdgeInsets.all(21),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  color: MyColors.greenColor,
                  borderRadius: BorderRadius.circular(5),
                ),
                padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8),
                child: "${widget.provider.currentQuestionNumber.toString()} / ${widget.provider.marathonDetailModel.totalQuestions.toString()}  ${LocaleKeys.question.tr()}"
                    .toText12(color: MyColors.white),
              ),
              "${widget.provider.totalMarathoners} ${LocaleKeys.marathoners.tr()}".toText14(),
              "00:${widget.provider.currentGapTime < 10 ? "0${widget.provider.currentGapTime}" : widget.provider.currentGapTime}".toText18(),
            ],
          ),
          15.height,
          StepsIndicator(
            lineLength: SizerUtil.deviceType == DeviceType.tablet ? MediaQuery.of(context).size.width * 0.077 : MediaQuery.of(context).size.width * 0.054,
            nbSteps: 10,
            selectedStep: widget.provider.currentQuestionNumber,
            doneLineColor: MyColors.greenColor,
            doneStepColor: MyColors.greenColor,
            doneLineThickness: 6,
            undoneLineThickness: 6,
            selectedStepSize: 10,
            unselectedStepSize: 10,
            doneStepSize: 10,
            selectedStepBorderSize: 0,
            unselectedStepBorderSize: 0,
            selectedStepColorIn: MyColors.greenColor,
            selectedStepColorOut: MyColors.greenColor,
            unselectedStepColorIn: MyColors.lightGreyDeColor,
            unselectedStepColorOut: MyColors.lightGreyDeColor,
            undoneLineColor: MyColors.lightGreyDeColor,
            enableLineAnimation: false,
            enableStepAnimation: false,
          ),
          12.height,
          Row(
            children: <Widget>[
              "${((widget.provider.currentQuestionNumber / widget.provider.marathonDetailModel.totalQuestions!) * 100).toInt()}% ${LocaleKeys.completed.tr()}".toText14(isBold: true),
            ],
          ),
        ],
      ),
    );
  }
}