mohemm-flutter-app/lib/ui/marathon/widgets/question_card.dart

import 'package:appinio_swiper/appinio_swiper.dart';
import 'package:flutter/cupertino.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/decorations_helper.dart';
import 'package:mohem_flutter_app/classes/lottie_consts.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/models/marathon/question_model.dart';
import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
import 'package:provider/provider.dart';

List<bool> isSelectedOptions = [
  false,
  false,
  false,
  false,
];

class QuestionCard extends StatelessWidget {
  final MarathonProvider provider;

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: provider.cardContentList.isEmpty
          ? Lottie.asset(MyLottieConsts.hourGlassLottie, height: 250).paddingOnly(top: 50)
          : SizedBox(
              height: 440,
              width: double.infinity,
              child: Consumer<MarathonProvider>(
                builder: (BuildContext context, MarathonProvider provider, _) {
                  return AppinioSwiper(
                    duration: const Duration(milliseconds: 400),
                    padding: EdgeInsets.zero,
                    isDisabled: true,
                    controller: provider.swiperController,
                    unswipe: (int index, AppinioSwiperDirection direction) {},
                    onSwipe: (int index, AppinioSwiperDirection direction) {},
                    cards: provider.cardContentList,
                  );
                },
              ),
            ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    MarathonProvider provider = context.watch<MarathonProvider>();
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: CupertinoColors.white,
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: CupertinoColors.systemGrey.withOpacity(0.2),
            spreadRadius: 3,
            blurRadius: 7,
            offset: const Offset(0, 3),
          )
        ],
      ),
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          Container(
            height: 78,
            width: double.infinity,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                transform: GradientRotation(.83),
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: <Color>[
                  MyColors.gradiantEndColor,
                  MyColors.gradiantStartColor,
                ],
              ),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
              ),
            ),
            child: Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 13),
                child: Text(
                  AppState().isArabic(context) ? provider.currentQuestion.titleAr ?? "" : provider.currentQuestion.titleEn ?? "",
                  style: const TextStyle(
                    color: MyColors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
          ),
          const AnswerContent(),
        ],
      ),
    );
  }
}

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

  void onAnswerTapped(BuildContext context, QuestionOptions questionOption) {}

  @override
  Widget build(BuildContext context) {
    MarathonProvider provider = context.watch<MarathonProvider>();
    return Container(
      padding: const EdgeInsets.all(13),
      decoration: const BoxDecoration(
        color: MyColors.kWhiteColor,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(10),
          bottomRight: Radius.circular(10),
        ),
      ),
      child: provider.currentQuestion.questionOptions != null
          ? ListView.builder(
              itemCount: provider.currentQuestion.questionOptions!.length,
              shrinkWrap: true,
              itemBuilder: (BuildContext context, int index) {
                return AnswerTileForText(
                  index: index,
                  onAnswerTapped: () {
                    provider.updateCurrentQuestionOptionStatus(QuestionsOptionStatus.selected, index);
                  },
                );
              },
            )
          // Column(
          //         mainAxisSize: MainAxisSize.min,
          //         mainAxisAlignment: MainAxisAlignment.center,
          //         crossAxisAlignment: CrossAxisAlignment.center,
          //         children: question.questionOptions!.map((QuestionOptions e) => AnswerTileForText(questionOption: e, onAnswerTapped: () {})).toList(),
          //       )
          : const SizedBox(),
    );
  }
}

class AnswerTileForText extends StatelessWidget {
  final int index;
  final Function() onAnswerTapped;

  const AnswerTileForText({Key? key, required this.index, required this.onAnswerTapped}) : super(key: key);

  // Decoration getContainerColor(int index) {
  //   if (!isSelectedOptions[index]) {
  //     return MyDecorations.getContainersDecoration(MyColors.greyF7Color);
  //   }
  //   if (isSelectedOptions[index] && context.watch<MarathonProvider>().currentGapTime > 0) {
  //     return MyDecorations.getContainersDecoration(MyColors.yellowColorII);
  //   }
  //   return MyDecorations.getContainersDecoration(
  //     isSelectedOptions[index] ? MyColors.greenColor : MyColors.greyF7Color,
  //   );
  // }

  @override
  Widget build(BuildContext context) {
    MarathonProvider provider = context.watch<MarathonProvider>();
    return InkWell(
      onTap: () {
        onAnswerTapped();
      },
      child: Container(
        alignment: Alignment.centerLeft,
        decoration: MyDecorations.getAnswersContainerColor(provider.currentQuestion.questionOptions![index].optionStatus!),
        child: Center(
          child: Text(
            AppState().isArabic(context) ? provider.currentQuestion.questionOptions![index].titleAr! : provider.currentQuestion.questionOptions![index].titleEn!,
            style: TextStyle(
              color: provider.currentQuestion.questionOptions![index].optionStatus == QuestionsOptionStatus.unSelected ? MyColors.darkTextColor : MyColors.white,
              fontWeight: FontWeight.w600,
              fontSize: 16,
            ),
          ).paddingOnly(top: 17, bottom: 17),
        ),
      ),
    ).paddingOnly(top: 8, bottom: 8);
  }
}

// InkWell(
//   onTap: () {
//     if (widget.provider.currentQuestionNumber == 9) {
//       widget.provider.cancelTimer();
//       widget.provider.resetValues();
//       Navigator.pushReplacementNamed(
//         context,
//         AppRoutes.marathonWinnerSelection,
//       );
//       return;
//     }
//     updateOption(0, true);
//   },
//   child: Container(
//     alignment: Alignment.centerLeft,
//     decoration: getContainerColor(0),
//     child: Center(
//       child: Text(
//         widget.question.questionOptions![0].titleEn!,
//         style: TextStyle(
//           color: isSelectedOptions[0] ? MyColors.white : MyColors.darkTextColor,
//           fontWeight: FontWeight.w600,
//           fontSize: 16,
//         ),
//       ).paddingOnly(top: 17, bottom: 17),
//     ),
//   ),
// ),
// const SizedBox(height: 15),
// InkWell(
//   onTap: () {
//     if (widget.provider.currentQuestionNumber == 9) {
//       widget.provider.cancelTimer();
//       widget.provider.resetValues();
//       Navigator.pushReplacementNamed(
//         context,
//         AppRoutes.marathonWinnerSelection,
//       );
//       return;
//     }
//     updateOption(1, true);
//   },
//   child: Container(
//     alignment: Alignment.centerLeft,
//     decoration: getContainerColor(1),
//     child: Center(
//       child: Text(
//         widget.question.questionOptions![1].titleEn!,
//         style: TextStyle(
//           color: isSelectedOptions[1] ? MyColors.white : MyColors.darkTextColor,
//           fontWeight: FontWeight.w600,
//           fontSize: 16,
//         ),
//       ).paddingOnly(top: 17, bottom: 17),
//     ),
//   ),
// ),
// const SizedBox(height: 15),
// InkWell(
//   onTap: () {
//     if (widget.provider.currentQuestionNumber == 9) {
//       widget.provider.cancelTimer();
//       widget.provider.resetValues();
//       Navigator.pushReplacementNamed(
//         context,
//         AppRoutes.marathonWinnerSelection,
//       );
//       return;
//     }
//     updateOption(2, true);
//   },
//   child: Container(
//     alignment: Alignment.centerLeft,
//     decoration: getContainerColor(2),
//     child: Center(
//       child: Text(
//         widget.question.questionOptions![2].titleEn!,
//         style: TextStyle(
//           color: isSelectedOptions[2] ? MyColors.white : MyColors.darkTextColor,
//           fontWeight: FontWeight.w600,
//           fontSize: 16,
//         ),
//       ).paddingOnly(top: 17, bottom: 17),
//     ),
//   ),
// ),
// const SizedBox(height: 15),
// InkWell(
//   onTap: () {
//     if (widget.provider.currentQuestionNumber == 9) {
//       widget.provider.cancelTimer();
//       widget.provider.resetValues();
//       Navigator.pushReplacementNamed(
//         context,
//         AppRoutes.marathonWinnerSelection,
//       );
//       return;
//     }
//     updateOption(3, true);
//   },
//   child: Container(
//     alignment: Alignment.centerLeft,
//     decoration: getContainerColor(3),
//     child: Center(
//       child: Text(
//         widget.question.questionOptions![3].titleEn!,
//         style: TextStyle(
//           color: isSelectedOptions[3] ? MyColors.white : MyColors.darkTextColor,
//           fontWeight: FontWeight.w600,
//           fontSize: 16,
//         ),
//       ).paddingOnly(top: 17, bottom: 17),
//     ),
//   ),
// ),