import 'package:cherry_toast/cherry_toast.dart';
import 'package:cherry_toast/resources/arrays.dart';
import 'package:flutter/material.dart';
import 'package:initial_folder/models/quiz_model.dart';
import 'package:initial_folder/models/quiz_question_model.dart';
import 'package:initial_folder/screens/course/quiz_result_page.dart';
import 'package:initial_folder/services/quiz_service.dart';
import 'package:initial_folder/size_config.dart';
import 'package:initial_folder/theme.dart';
import 'package:initial_folder/widgets/login_regist/default_button.dart';
import 'package:tap_debouncer/tap_debouncer.dart';
import 'package:html/parser.dart';

class quiz_questionPage extends StatefulWidget {
  final String judulQuiz;
  final String lessonId;
  final int totalQuiz;
  final int quizId;
  const quiz_questionPage(
      {super.key,
      required this.judulQuiz,
      required this.lessonId,
      required this.totalQuiz,
      required this.quizId});

  @override
  State<quiz_questionPage> createState() => _quiz_questionPageState();
}

class _quiz_questionPageState extends State<quiz_questionPage> {
  int currentQuestionIndex = 0; // Menyimpan indeks pertanyaan saat ini
  QuizModel? quizModel;
  String? selectedOption;
  bool isSelected = false;
  List<Map<String, dynamic>> savedAnswers = [];

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

    getQuiz();
  }

  void getQuiz() {
    quiz_service().get_quiz_info(widget.lessonId).then((value) {
      setState(() {
        quizModel = value;
      });
    });
  }

  Widget build(BuildContext context) {
    String _parseHtmlString(String htmlText) {
      RegExp exp =
          RegExp(r"<[^>]*>|&nbsp;", multiLine: true, caseSensitive: true);

      return htmlText.replaceAll(exp, '');
    }

    return quizModel == null
        ? Center(
            child: Scaffold(
            body: Center(
              child: CircularProgressIndicator(
                color: primaryColor,
              ),
            ),
          ))
        : Scaffold(
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Pertanyaan ${currentQuestionIndex + 1}', // Menampilkan nomor pertanyaan
                  textAlign: TextAlign.center,
                  style: primaryTextStyle.copyWith(
                    fontWeight: reguler,
                    fontSize: getProportionateScreenWidth(15),
                  ),
                ),
                SizedBox(
                  height: getProportionateScreenHeight(15),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 30),
                  child: Text(
                    _parseHtmlString(quizModel!.data[currentQuestionIndex]
                        .title), // Menampilkan judul pertanyaan
                    textAlign: TextAlign.center,
                    style: thirdTextStyle.copyWith(
                      fontWeight: reguler,
                      fontSize: getProportionateScreenWidth(15),
                    ),
                  ),
                ),
                SizedBox(
                  height: getProportionateScreenHeight(20),
                ),
                Container(
                    width: getProportionateScreenWidth(350),
                    height: getProportionateScreenHeight(400),
                    // color: Colors.amber,
                    child: SingleChildScrollView(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: quizModel!.data[currentQuestionIndex].options
                            .map((option) {
                          return Padding(
                            padding: EdgeInsets.fromLTRB(
                                getProportionateScreenWidth(15),
                                getProportionateScreenHeight(5),
                                getProportionateScreenWidth(15),
                                getProportionateScreenHeight(5)),
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Theme.of(context)
                                      .colorScheme
                                      .primaryContainer,
                                  borderRadius: BorderRadius.circular(15),
                                  boxShadow: [
                                    BoxShadow(
                                        color: Theme.of(context).brightness ==
                                                Brightness.dark
                                            ? Colors.black
                                            : Colors.grey,
                                        blurRadius: 2,
                                        spreadRadius: 1,
                                        offset: Offset(0, 3))
                                  ]),
                              child: CheckboxListTile(
                                activeColor: primaryColor,
                                checkColor: Colors.white,
                                checkboxShape: RoundedRectangleBorder(
                                  side: BorderSide(
                                      color:
                                          primaryColor), // Mengatur warna dan ketebalan outline checkbox
                                  borderRadius: BorderRadius.circular(2),
                                ),
                                title: Text(
                                  option,
                                  style: thirdTextStyle.copyWith(fontSize: 14),
                                ),
                                value: selectedOption == option,
                                controlAffinity: ListTileControlAffinity
                                    .leading, // Checkbox di sebelah kiri
                                onChanged: (value) {
                                  setState(() {
                                    selectedOption = value! ? option : null!;
                                    isSelected = true;
                                  });
                                },
                              ),
                            ),
                          );
                        }).toList(),
                      ),
                    )),
                SizedBox(height: 20),
                Padding(
                    padding: EdgeInsets.only(
                        left: getProportionateScreenWidth(100),
                        right: getProportionateScreenWidth(100)),
                    child: TapDebouncer(
                      cooldown: const Duration(milliseconds: 1000),
                      onTap: () async => await {
                        setState(() {
                          //ini save quiz
                          if (isSelected != false) {
                            savedAnswers.add({
                              '"question_id"':
                                  quizModel!.data[currentQuestionIndex].id,
                              '"answers"': [
                                '"${quizModel!.data[currentQuestionIndex].options.indexOf(selectedOption!) + 1}"'
                              ]
                            });
                            if (currentQuestionIndex <
                                quizModel!.data.length - 1) {
                              currentQuestionIndex++;
                            } else {
                              if (widget.totalQuiz ==
                                  currentQuestionIndex + 1) {
                                print('sudah habis');
                                // print(savedAnswers);
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => quiz_resultPage(
                                              judulQuiz: widget.judulQuiz,
                                              lessonId: widget.lessonId,
                                              totalQuiz: quizModel!.total,
                                              allAnswer:
                                                  savedAnswers.toString(),
                                              IdQuiz: widget.quizId,
                                            )));
                              }
                            }
                          } else {
                            CherryToast.error(
                              animationDuration: Durations.long1,
                              title: Text(
                                "Silakhan Pilih salah satu \nJawaban yang tersedia",
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 15,
                                ),
                              ),
                              animationType: AnimationType.fromTop,
                            ).show(context);
                            print('object');
                          }
                          // print(savedAnswers);
                          isSelected = false;
                        })
                      },
                      builder: (BuildContext context, TapDebouncerFunc? onTap) {
                        return DefaultButton(
                            text: 'Submit & Next', press: onTap);
                      },
                    ))
              ],
            ),
          );
  }
}