import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.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/decorations_helper.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/models/marathon/question_model.dart';
import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';

class MarathonProgressContainer extends StatelessWidget {
  final MarathonProvider provider;

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

  Widget getDemoMarathonerText() {
    if (provider.isUserOutOfGame) {
      return "0 ${LocaleKeys.marathoner.tr()}".toText14();
    }
    return "1 ${LocaleKeys.marathoner.tr()}".toText14();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: MyDecorations.shadowDecoration,
      padding: EdgeInsets.fromLTRB(13, AppState().getIsDemoMarathon ? 5 : 18, 13, 18),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          AppState().getIsDemoMarathon
              ? Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Container(
                      decoration: BoxDecoration(color: MyColors.yellowColorII, borderRadius: BorderRadius.circular(100)),
                      child: LocaleKeys.demo.tr().toText10(color: MyColors.white).paddingAll(4),
                    ),
                  ],
                )
              : const SizedBox(),
          5.height,
          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:
                    "${provider.currentQuestionNumber.toString()} / ${AppState().getIsDemoMarathon ? provider.demoMarathonDetailModel.totalQuestions.toString() : provider.marathonDetailModel.totalQuestions.toString()}  ${LocaleKeys.question.tr()}"
                        .toText12(color: MyColors.white),
              ),
              AppState().getIsDemoMarathon
                  ? getDemoMarathonerText()
                  : "${provider.totalMarathoners} ${provider.totalMarathoners == 1 ? LocaleKeys.marathoner.tr() : LocaleKeys.marathoners.tr()}".toText14(),
              provider.questionCardStatus == QuestionCardStatus.question
                  ? "00:${(provider.totalCurrentQuestionTime - provider.currentGapTime) < 10 ? "0${provider.totalCurrentQuestionTime - provider.currentGapTime}" : provider.totalCurrentQuestionTime - provider.currentGapTime}"
                      .toText18(color: provider.totalCurrentQuestionTime - provider.currentGapTime < 5 ? MyColors.redColor : MyColors.black)
                  : const SizedBox(),
            ],
          ),
          12.height,
          stepper(
            provider.currentQuestionNumber,
            provider.answerStatusesList,
            AppState().getIsDemoMarathon ? provider.demoMarathonDetailModel.totalQuestions! : provider.marathonDetailModel.totalQuestions!,
            provider.isUserOutOfGame,
          ),
          8.height,
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              "${provider.currentQuestionNumber == 1 ? 0 : (((provider.currentQuestionNumber - 1) / (AppState().getIsDemoMarathon ? provider.demoMarathonDetailModel.totalQuestions! : provider.marathonDetailModel.totalQuestions!)) * 100).toInt()}% ${LocaleKeys.completed.tr()}"
                  .toText14(),
              provider.isUserOutOfGame ? LocaleKeys.youAreOutOfContest.tr().toText13(color: MyColors.redColor) : const SizedBox(),
            ],
          ),
        ],
      ),
    );
  }

  Color getStepColor(QuestionCardStatus status, bool isOutOfGame) {
    switch (status) {
      case QuestionCardStatus.question:
        return MyColors.yellowColorII;
      case QuestionCardStatus.wrongAnswer:
        return MyColors.redColor;
      case QuestionCardStatus.correctAnswer:
        return MyColors.greenColor;
      case QuestionCardStatus.skippedAnswer:
        return MyColors.redColor;
      case QuestionCardStatus.completed:
        return MyColors.lightGreyDeColor;
      case QuestionCardStatus.findingWinner:
        return MyColors.lightGreyDeColor;
      case QuestionCardStatus.winnerFound:
        return MyColors.lightGreyDeColor;
    }
  }

  Widget stepper(int value, List<QuestionCardStatus> statusesList, int totalQuestions, bool isOutOfGame) {
    return SizedBox(
      width: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          for (int i = 0; i < totalQuestions; i++)
            if (value <= i)
              roundContainer(MyColors.lightGreyDeColor, i != 0)
            else
              roundContainer(
                getStepColor(statusesList[i], isOutOfGame),
                i != 0,
              )
        ],
      ),
    );
  }

  Widget roundContainer(Color color, bool isNeedLeftBorder) {
    if (isNeedLeftBorder) {
      return Row(
        children: <Widget>[
          Divider(
            thickness: 6,
            color: color,
          ).expanded,
          Container(
            margin: EdgeInsets.zero,
            padding: EdgeInsets.zero,
            width: 10,
            height: 10,
            decoration: BoxDecoration(shape: BoxShape.circle, color: color, border: Border.all(color: color, width: 2)),
          ),
        ],
      ).expanded;
    }

    return Container(
      margin: EdgeInsets.zero,
      padding: EdgeInsets.zero,
      width: 10,
      height: 10,
      decoration: BoxDecoration(shape: BoxShape.circle, color: color, border: Border.all(color: color, width: 2)),
    );
  }
}