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/classes/utils.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: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 Scaffold(
      appBar: AppBarWidget(
        context,
        title: LocaleKeys.brainMarathon.tr(),
        onHomeTapped: () {
          Utils.confirmDialog(context, LocaleKeys.youWantToLeaveMarathon.tr());
        },
        onBackTapped: () {
          Utils.confirmDialog(context, LocaleKeys.youWantToLeaveMarathon.tr());
        },
      ),
      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(),
                      "00:${provider.currentQuestionTime < 10 ? "0${provider.currentQuestionTime}" : provider.currentQuestionTime}"
                          .toText18(color: provider.currentQuestionTime < 5 ? MyColors.redColor : MyColors.black),
                    ],
                  ),
                ),
              ],
            ),
          ).expanded,
        ],
      ),
    );
  }
}