import 'package:appinio_swiper/appinio_swiper.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/decorations_helper.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';

class QuestionCard extends StatefulWidget {
  final MarathonProvider provider;

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

  @override
  State<QuestionCard> createState() => _QuestionCardState();
}

class _QuestionCardState extends State<QuestionCard> {
  final List<QuestionContent> questionCards = <QuestionContent>[];

  @override
  void initState() {
    _loadCards();
    super.initState();
  }

  void _loadCards() {
    for (DummyQuestionModel question in questions) {
      questionCards.add(
        QuestionContent(question: question),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: SizedBox(
        height: MediaQuery.of(context).size.height * 0.6,
        width: double.infinity,
        child: Consumer<MarathonProvider>(
          builder: (BuildContext context, MarathonProvider provider, _) {
            return AppinioSwiper(
              isDisabled: true,
              controller: provider.swiperController,
              unswipe: (int index, AppinioSwiperDirection direction) {},
              cards: questionCards,
              onSwipe: (int index, AppinioSwiperDirection direction) {
                if (direction == AppinioSwiperDirection.left){
                  provider.startTimer();
                }
              },
            );
          },
        ),
      ),
    );
  }
}

class QuestionContent extends StatelessWidget {
  final DummyQuestionModel question;

  const QuestionContent({
    Key? key,
    required this.question,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    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: 90,
            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: const Center(
              child: Text(
                "What is the capital of Saudi Arabia?",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ),
          AnswerContent(question: question),
        ],
      ),
    );
  }
}

class AnswerContent extends StatelessWidget {
  final DummyQuestionModel question;

  const AnswerContent({Key? key, required this.question}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(15),
      decoration: const BoxDecoration(
        color: MyColors.kWhiteColor,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(10),
          bottomRight: Radius.circular(10),
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          InkWell(
            onTap: () {},
            child: Container(
              height: 60,
              width: MediaQuery.of(context).size.width - 75,
              alignment: Alignment.centerLeft,
              decoration: MyDecorations.answerContainerDecoration,
              child: Center(
                child: Text(
                  question.opt1!,
                  style: const TextStyle(
                    color: MyColors.darkTextColor,
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(height: 15),
          InkWell(
            onTap: () {},
            child: Container(
              height: 60,
              width: MediaQuery.of(context).size.width - 75,
              alignment: Alignment.centerLeft,
              decoration: MyDecorations.answerContainerDecoration,
              child: Center(
                child: Text(
                  question.opt2!,
                  style: const TextStyle(
                    color: MyColors.darkTextColor,
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(height: 15),
          InkWell(
            onTap: () {},
            child: Container(
              height: 60,
              width: MediaQuery.of(context).size.width - 75,
              alignment: Alignment.centerLeft,
              decoration: MyDecorations.answerContainerDecoration,
              child: Center(
                child: Text(
                  question.opt3!,
                  style: const TextStyle(
                    color: MyColors.darkTextColor,
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(height: 15),
          InkWell(
            onTap: () {},
            child: Container(
              height: 60,
              width: MediaQuery.of(context).size.width - 75,
              alignment: Alignment.centerLeft,
              decoration: MyDecorations.answerContainerDecoration,
              child: Center(
                child: Text(
                  question.opt3!,
                  style: const TextStyle(
                    color: MyColors.darkTextColor,
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

//Column(
//         mainAxisSize: MainAxisSize.min,
//         mainAxisAlignment: MainAxisAlignment.center,
//         crossAxisAlignment: CrossAxisAlignment.center,
//         children: <Widget>[
//           InkWell(
//             onTap: () {},
//             child: Container(
//               height: 60,
//               width: MediaQuery.of(context).size.width - 75,
//               alignment: Alignment.centerLeft,
//               decoration: MyDecorations.answerContainerDecoration,
//               child: Center(
//                 child: Text(
//                   question.opt1!,
//                   style: const TextStyle(
//                     color: MyColors.darkTextColor,
//                     fontWeight: FontWeight.bold,
//                     fontSize: 18,
//                   ),
//                 ),
//               ),
//             ),
//           ),
//           const SizedBox(height: 15),
//           InkWell(
//             onTap: () {},
//             child: Container(
//               height: 60,
//               width: MediaQuery.of(context).size.width - 75,
//               alignment: Alignment.centerLeft,
//               decoration: MyDecorations.answerContainerDecoration,
//               child: Center(
//                 child: Text(
//                   question.opt2!,
//                   style: const TextStyle(
//                     color: MyColors.darkTextColor,
//                     fontWeight: FontWeight.bold,
//                     fontSize: 18,
//                   ),
//                 ),
//               ),
//             ),
//           ),
//           const SizedBox(height: 15),
//           InkWell(
//             onTap: () {},
//             child: Container(
//               height: 60,
//               width: MediaQuery.of(context).size.width - 75,
//               alignment: Alignment.centerLeft,
//               decoration: MyDecorations.answerContainerDecoration,
//               child: Center(
//                 child: Text(
//                   question.opt3!,
//                   style: const TextStyle(
//                     color: MyColors.darkTextColor,
//                     fontWeight: FontWeight.bold,
//                     fontSize: 18,
//                   ),
//                 ),
//               ),
//             ),
//           ),
//           const SizedBox(height: 15),
//           InkWell(
//             onTap: () {},
//             child: Container(
//               height: 60,
//               width: MediaQuery.of(context).size.width - 75,
//               alignment: Alignment.centerLeft,
//               decoration: MyDecorations.answerContainerDecoration,
//               child: Center(
//                 child: Text(
//                   question.opt3!,
//                   style: const TextStyle(
//                     color: MyColors.darkTextColor,
//                     fontWeight: FontWeight.bold,
//                     fontSize: 18,
//                   ),
//                 ),
//               ),
//             ),
//           ),
//         ],
//       ),