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

import 'dart:async';

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_countdown_timer/current_remaining_time.dart';
import 'package:flutter_countdown_timer/flutter_countdown_timer.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/marathon_header.dart';
import 'package:mohem_flutter_app/widgets/button/default_button.dart';
import 'package:provider/provider.dart';

final int dummyEndTime = DateTime.now().millisecondsSinceEpoch + 1000 * 10;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Consumer<MarathonProvider>(
        builder: (BuildContext context, MarathonProvider provider, _) {
          return Stack(
            children: <Widget>[
              SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    const MarathonHeader(),
                    20.height,
                    const MarathonDetailsCard().paddingAll(15),
                    MarathonTimerCard(
                      provider: provider,
                      timeToMarathon: dummyEndTime,
                    ).paddingAll(15),
                  ],
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: MarathonFooter(provider: provider),
              ),
            ],
          );
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              LocaleKeys.contestTopicAbout
                  .tr()
                  .toText16(color: MyColors.grey77Color),
              "Saudi Arabia"
                  .toText20(color: MyColors.textMixColor, isBold: true),
              10.height,
            ],
          ),
          Row(
            children: <Widget>[
              LocaleKeys.gameDate.tr().toText16(color: MyColors.grey77Color),
              " 10 Oct, 2022"
                  .toText16(color: MyColors.darkTextColor, isBold: true),
            ],
          ),
          Row(
            children: <Widget>[
              LocaleKeys.gameTime.tr().toText16(color: MyColors.grey77Color),
              " 3:00pm".toText16(color: MyColors.darkTextColor, isBold: true),
            ],
          ),
        ],
      ),
    );
  }
}

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: 20, horizontal: 20),
      child: Column(
        children: <Widget>[
          Lottie.asset(MyLottieConsts.hourGlassLottie, height: 200),
          BuildCountdownTimer(
            timeToMarathon: timeToMarathon,
            provider: provider,
          ),
        ],
      ),
    );
  }
}

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

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

  Widget buildEmptyWidget() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Column(
          children: <Widget>[
            "00".toText32(),
            LocaleKeys.days.tr().toText14(color: MyColors.grey57Color),
          ],
        ),
        buildSeparator(),
        Column(
          children: <Widget>[
            "00".toText32(),
            LocaleKeys.hours.tr().toText14(color: MyColors.grey57Color),
          ],
        ),
        buildSeparator(),
        Column(
          children: <Widget>[
            "00".toText32(),
            LocaleKeys.minutes.tr().toText14(color: MyColors.grey57Color),
          ],
        ),
        buildSeparator(),
        Column(
          children: <Widget>[
            "00".toText32(),
            LocaleKeys.seconds.tr().toText14(color: MyColors.grey57Color),
          ],
        ),
      ],
    );
  }

  Widget buildSeparator() {
    return " : ".toText32();
  }

  Widget buildCountdownTimer(CurrentRemainingTime? time) {
    if (time == null) {
      scheduleMicrotask(() {
        provider.itsMarathonTime = true;
      });
      return buildEmptyWidget();
    }
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Column(
          children: <Widget>[
            time.days == null
                ? "00".toText32()
                : time.days.toString().toText32(),
            LocaleKeys.days.tr().toText14(color: MyColors.grey57Color),
          ],
        ),
        buildSeparator(),
        Column(
          children: <Widget>[
            time.hours == null
                ? "00".toText32()
                : time.hours.toString().toText32(),
            LocaleKeys.hours.tr().toText14(color: MyColors.grey57Color),
          ],
        ),
        buildSeparator(),
        Column(
          children: <Widget>[
            time.min == null ? "00".toText32() : time.min.toString().toText32(),
            LocaleKeys.minutes.tr().toText14(color: MyColors.grey57Color),
          ],
        ),
        buildSeparator(),
        Column(
          children: <Widget>[
            time.sec == null ? "00".toText32() : time.sec.toString().toText32(),
            LocaleKeys.seconds.tr().toText14(color: MyColors.grey57Color),
          ],
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return CountdownTimer(
      endTime: timeToMarathon,
      onEnd: null,
      widgetBuilder: (BuildContext context, CurrentRemainingTime? time) {
        return buildCountdownTimer(time);
      },
    );
  }
}

class MarathonFooter extends StatelessWidget {
  final MarathonProvider provider;

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

  Widget buildNoteForDemo() {
    return Flexible(
      child: RichText(
        text: TextSpan(
          children: <InlineSpan>[
            TextSpan(
              text: LocaleKeys.note.tr(),
              style: const TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
                color: MyColors.darkTextColor,
              ),
            ),
            TextSpan(
              text: " " + LocaleKeys.demoMarathonNoteP1.tr(),
              style: const TextStyle(
                color: MyColors.darkTextColor,
                fontSize: 18,
                fontWeight: FontWeight.w600,
              ),
            ),
            TextSpan(
              text: " " + LocaleKeys.demoMarathonNoteP2.tr(),
              style: const TextStyle(
                color: MyColors.darkTextColor,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            TextSpan(
              text: " " + LocaleKeys.demoMarathonNoteP3.tr(),
              style: const TextStyle(
                color: MyColors.darkTextColor,
                fontSize: 18,
                fontWeight: FontWeight.w600,
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: MyColors.kWhiteColor,
      width: double.infinity,
      padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 15),
      child: provider.itsMarathonTime
          ? DefaultButton(
              LocaleKeys.joinMarathon.tr(),
              () => Navigator.pushNamed(context, AppRoutes.marathonScreen),
            ).insideContainer 
          : Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                buildNoteForDemo(),
                DefaultButton(LocaleKeys.joinDemoMarathon.tr(), () {})
                    .insideContainer,
              ],
            ),
    );
  }
}