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

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.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/date_uitl.dart';
import 'package:mohem_flutter_app/classes/decorations_helper.dart';
import 'package:mohem_flutter_app/classes/lottie_consts.dart';
import 'package:mohem_flutter_app/classes/utils.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/countdown_timer.dart';
import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
import 'package:mohem_flutter_app/widgets/button/default_button.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    MarathonProvider provider = context.watch<MarathonProvider>();
    return Scaffold(
      appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
      body: Column(
        children: <Widget>[
          ListView(
            padding: const EdgeInsets.all(21),
            children: <Widget>[
              MarathonDetailsCard(provider: provider),
              10.height,
              MarathonTimerCard(provider: provider,  timeToMarathon: DateTime.parse(provider.marathonDetailModel.startTime!).millisecondsSinceEpoch,),
            ],
          ).expanded,
          1.divider,
          MarathonFooter(provider: provider),
        ],
      ),
    );
  }
}

class MarathonDetailsCard extends StatelessWidget {
  final MarathonProvider provider;

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 14),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              LocaleKeys.contestTopicAbout.tr().toText16(color: MyColors.grey77Color),
              "${AppState().isArabic(context) ? provider.marathonDetailModel.titleAr : provider.marathonDetailModel.titleEn}".toText20(color: MyColors.textMixColor, isBold: true),
              Row(
                children: <Widget>[
                  Flexible(
                    child: "${AppState().isArabic(context) ? provider.marathonDetailModel.descAr : provider.marathonDetailModel.descEn}".toText14(color: MyColors.grey77Color),
                  )
                ],
              ),
              if (provider.itsMarathonTime && provider.marathonDetailModel.sponsors != null) ...<Widget>[
                5.height,
                provider.marathonDetailModel.sponsors?.first.sponsorPrizes != null
                    ? Row(
                        children: <Widget>[
                          "${LocaleKeys.prize.tr()} ".toText16(color: MyColors.grey77Color, isBold: true),
                          "${AppState().isArabic(context) ? provider.marathonDetailModel.sponsors?.first.sponsorPrizes?.first.marathonPrizeAr : provider.marathonDetailModel.sponsors?.first.sponsorPrizes?.first.marathonPrizeAr}"
                              .toText16(color: MyColors.greenColor, isBold: true),
                        ],
                      )
                    : const SizedBox(),
                Row(
                  children: <Widget>[
                    "${LocaleKeys.sponsoredBy.tr()} ".toText16(color: MyColors.grey77Color),
                    "${AppState().isArabic(context) ? provider.marathonDetailModel.sponsors?.first.nameAr : provider.marathonDetailModel.sponsors?.first.nameEn}"
                        .toText16(color: MyColors.darkTextColor, isBold: true),
                  ],
                ),
                10.height,
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.network(
                      provider.marathonDetailModel.sponsors!.first.image!,
                      height: 40,
                      width: 150,
                      fit: BoxFit.fill,
                      errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
                        return const Center();
                      },
                    )
                  ],
                ),
              ]
            ],
          ),
        ],
      ),
    );
  }
}

class MarathonTimerCard extends StatelessWidget {
  final int timeToMarathon;
  final MarathonProvider provider;

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 14),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              "${LocaleKeys.gameDate.tr()} ".toText16(color: MyColors.grey77Color),
              DateUtil.getMonthDayYearDateFormatted(DateTime.parse(provider.marathonDetailModel.startTime!)).toText16(color: MyColors.darkTextColor, isBold: true),
            ],
          ),
          Row(
            children: <Widget>[
              "${LocaleKeys.gameTime.tr()} ".toText16(color: MyColors.grey77Color),
              DateUtil.formatDateToTimeLang(DateTime.parse(provider.marathonDetailModel.startTime!), AppState().isArabic(context)).toText16(color: MyColors.darkTextColor, isBold: true),
            ],
          ),
          Lottie.asset(MyLottieConsts.hourGlassLottie, height: 200),
          BuildCountdownTimer(timeToMarathon: timeToMarathon, provider: provider, screenFlag: 1),
        ],
      ),
    );
  }
}

class MarathonFooter extends StatelessWidget {
  final MarathonProvider provider;

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

  Widget buildNoteForDemo() {
    return RichText(
      text: TextSpan(
        children: <InlineSpan>[
          TextSpan(
            text: LocaleKeys.note.tr(),
            style: const TextStyle(color: MyColors.darkTextColor, fontSize: 17, letterSpacing: -0.64, fontWeight: FontWeight.bold),
          ),
          TextSpan(
            text: " " + LocaleKeys.demoMarathonNoteP1.tr(),
            style: const TextStyle(color: MyColors.grey77Color, fontSize: 17, letterSpacing: -0.64, fontWeight: FontWeight.w500),
          ),
          TextSpan(
            text: " " + LocaleKeys.demoMarathonNoteP2.tr(),
            style: const TextStyle(color: MyColors.darkTextColor, fontSize: 17, fontWeight: FontWeight.bold),
          ),
          TextSpan(
            text: " " + LocaleKeys.demoMarathonNoteP3.tr(),
            style: const TextStyle(color: MyColors.grey77Color, fontSize: 17, letterSpacing: -0.64, fontWeight: FontWeight.w500),
          )
        ],
      ),
    ).paddingOnly(right: 21, left: 21, top: 11, bottom: 0);
  }

  @override
  Widget build(BuildContext context) {
    return !provider.itsMarathonTime
        ? DefaultButton(
            LocaleKeys.joinMarathon.tr(),
            () async {
              Utils.showLoading(context);
              try {
                provider.resetValues();
                await provider.connectSignalrAndJoinMarathon(context);
              } catch (e, s) {
                Utils.confirmDialog(context, e.toString());
                print(s);
              }
              Utils.hideLoading(context);
              Navigator.pushNamed(context, AppRoutes.marathonScreen);
            },
          ).insideContainer
        : Container(
            color: Colors.white,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                buildNoteForDemo(),
                DefaultButton(
                  LocaleKeys.joinDemoMarathon.tr(),
                  () {
                    provider.connectSignalrAndJoinMarathon(context);
                  },
                  color: MyColors.yellowColorII,
                ).insideContainer,
              ],
            ),
          );
  }
}