import 'dart:convert';
import 'dart:developer';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:confetti/confetti.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Components/Buttons/rounded_button.dart';
import 'package:tablet_app/Models/ResponseSubDTO.dart';
import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart';

import 'drawStrawberry.dart';


class QuizzViewWidget extends StatefulWidget {
  final SectionDTO section;
  GlobalKey<ScaffoldState> key;
  QuizzViewWidget({this.section, this.key});

  @override
  _QuizzViewWidget createState() => _QuizzViewWidget();
}

class _QuizzViewWidget extends State<QuizzViewWidget> {
  ConfettiController _controllerCenter;
  QuizzDTO quizzDTO;
  List<QuestionSubDTO> _questionsSubDTO = <QuestionSubDTO>[];
  CarouselController sliderController;
  int currentIndex = 1;
  bool showResult = false;

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

    _controllerCenter = ConfettiController(duration: const Duration(seconds: 10));

    sliderController = CarouselController();
    quizzDTO = QuizzDTO.fromJson(jsonDecode(widget.section.data));

    quizzDTO.questions.sort((a, b) => a.order.compareTo(b.order));
    _questionsSubDTO = QuestionSubDTO().fromJSON(quizzDTO.questions);

    _controllerCenter.play();

  }

  @override
  void dispose() {
    sliderController = null;
    currentIndex = 1;
    _controllerCenter.dispose();
    _questionsSubDTO = QuestionSubDTO().fromJSON(quizzDTO.questions);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    final appContext = Provider.of<AppContext>(context);

    if(showResult)
      {
        var goodResponses = 0;
        _questionsSubDTO.forEach((question) {
          if(question.chosen == question.responsesSubDTO.indexWhere((response) => response.isGood))
            goodResponses +=1;
        });
        log("goodResponses =" + goodResponses.toString());
        var levelToShow;
        var test = goodResponses/quizzDTO.questions.length;
        log("test" + test.toString());

        if(0 == test && test < 0.25)
          levelToShow = quizzDTO.badLevel;
        if(test>=0.25 && test < 0.5)
          levelToShow = quizzDTO.mediumLevel;
        if(test>=0.5 && test < 0.75)
          levelToShow = quizzDTO.goodLevel;
        if(test>=0.75 && test <= 1)
          levelToShow = quizzDTO.greatLevel;
        return Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Center(
              child: Container(
                width: 5,
                height: 5,
                child: ConfettiWidget(
                  confettiController: _controllerCenter,
                  blastDirectionality: BlastDirectionality.explosive,
                  shouldLoop: false, // start again as soon as the animation is finished
                  colors: const [
                    Colors.red,
                    kMainRed,
                    kSecondRed
                    //Colors.pink,
                    //Colors.orange,
                    //Colors.purple
                  ], // manually specify the colors to be used
                  createParticlePath: drawStrawberry, // define a custom shape/path.
                ),
              ),
            ),
            if (levelToShow.source_ != null)
              Container(
                height: size.height * 0.2,
                width: size.width * 0.25,
                margin: EdgeInsets.symmetric(horizontal: 5.0),
                decoration: BoxDecoration(
                  color: kBackgroundLight,
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(20.0),
                  image: levelToShow.source_ != null ? new DecorationImage(
                    fit: BoxFit.contain,
                    opacity: 0.85,
                    image: new NetworkImage(
                      levelToShow.source_,
                    ),
                  ): null,
                ),
              ),
            Container(
              child: Text('$goodResponses/${quizzDTO.questions.length}', textAlign: TextAlign.center, style: TextStyle(fontSize: 150, color: kBackgroundSecondGrey )),
            ),
            Container(
              child: Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Container(
                  width: MediaQuery.of(context).size.width *0.65,
                  height: MediaQuery.of(context).size.height *0.25,
                  decoration: BoxDecoration(
                    color: kBackgroundLight,
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(10.0),
                    boxShadow: [
                      BoxShadow(
                        color: kBackgroundSecondGrey,
                        spreadRadius: 0.3,
                        blurRadius: 4,
                        offset: Offset(0, 2), // changes position of shadow
                      ),
                    ],
                  ),
                  child: Center(
                    child: Container(
                      width: double.infinity,
                      child: SingleChildScrollView(
                        child: Padding(
                          padding: const EdgeInsets.all(15.0),
                          child: Text(levelToShow.label.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? levelToShow.label.firstWhere((translation) => translation.language == appContext.getContext().language).value : "", textAlign: TextAlign.center, style: TextStyle(fontSize: kDescriptionSize)),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            // Buttons
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    height: 85,
                    child: RoundedButton(
                        text: "Recommencer",
                        color: kBackgroundSecondGrey,
                        textColor: kBackgroundLight,
                        icon: Icons.undo,
                        press: () {
                          setState(() {
                            showResult = false;
                            currentIndex = 1;
                            _questionsSubDTO = QuestionSubDTO().fromJSON(quizzDTO.questions);
                          });
                        },
                        fontSize: 30,
                        horizontal: 30,
                        vertical: 10
                    ),
                  ),
                ],
              ),
            ),
          ],
        );
      }
    else
      return Stack(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                if(_questionsSubDTO != null && _questionsSubDTO.length > 0)
                  CarouselSlider(
                    carouselController: sliderController,
                    options: CarouselOptions(
                      onPageChanged: (int index, CarouselPageChangedReason reason) {
                        setState(() {
                          currentIndex = index + 1;
                        });
                      },
                      height: MediaQuery.of(context).size.height * 0.8,
                      enlargeCenterPage: true,
                      scrollPhysics: NeverScrollableScrollPhysics(),
                      reverse: false,
                    ),
                    items: _questionsSubDTO.map<Widget>((i) {
                      return Builder(
                        builder: (BuildContext context) {
                          return Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                                width: MediaQuery.of(context).size.width,
                                height: MediaQuery.of(context).size.height,
                                margin: EdgeInsets.symmetric(horizontal: 5.0),
                                decoration: BoxDecoration(
                                  color: kBackgroundLight,
                                  shape: BoxShape.rectangle,
                                  borderRadius: BorderRadius.circular(20.0),
                                  image: i.source_ != null ? new DecorationImage(
                                    fit: BoxFit.contain,
                                    opacity: 0.35,
                                    image: new NetworkImage(
                                      i.source_,
                                    ),
                                  ): null,
                                  boxShadow: [
                                    BoxShadow(
                                      color: kBackgroundSecondGrey,
                                      spreadRadius: 0.5,
                                      blurRadius: 5,
                                      offset: Offset(0, 1.5), // changes position of shadow
                                    ),
                                  ],
                                ),
                                child: Column(
                                  //crossAxisAlignment: CrossAxisAlignment.center,
                                  //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  children: [
                                    Padding(
                                      padding: const EdgeInsets.all(10.0),
                                      child: Container(
                                        //width: MediaQuery.of(context).size.width *0.65,
                                        height: MediaQuery.of(context).size.height *0.25,
                                        child: Stack(
                                          children: [
                                            Center(
                                              child: Container(
                                                decoration: BoxDecoration(
                                                  color: kBackgroundLight,
                                                  shape: BoxShape.rectangle,
                                                  borderRadius: BorderRadius.circular(10.0),
                                                  boxShadow: [
                                                    BoxShadow(
                                                      color: kBackgroundSecondGrey,
                                                      spreadRadius: 0.3,
                                                      blurRadius: 4,
                                                      offset: Offset(0, 2), // changes position of shadow
                                                    ),
                                                  ],
                                                ),
                                                width: MediaQuery.of(context).size.width *0.65,
                                                height: MediaQuery.of(context).size.height *0.18,
                                                child: Center(
                                                  child: SingleChildScrollView(
                                                    child: Padding(
                                                      padding: const EdgeInsets.all(15.0),
                                                      child: Text(i.label.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.label.firstWhere((translation) => translation.language == appContext.getContext().language).value : "", textAlign: TextAlign.center, style: TextStyle(fontSize: kDescriptionSize)),
                                                    ),
                                                  ),
                                                ),
                                              )
                                            ),
                                          ]
                                        ),
                                      ),
                                    ),
                                    SizedBox(
                                      height: MediaQuery.of(context).size.height * 0.05,
                                    ),
                                    Expanded(
                                      child: Padding(
                                        padding: const EdgeInsets.all(10.0),
                                        child: Container(
                                          height: MediaQuery.of(context).size.height * 0.6,
                                          width: MediaQuery.of(context).size.width * 0.72,
                                          //color: Colors.green,
                                          child: Padding(
                                            padding: const EdgeInsets.all(10.0),
                                            child: GridView.builder(
                                                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                                  crossAxisCount: 2,
                                                  mainAxisExtent: 150,
                                                  mainAxisSpacing: 150,
                                                  crossAxisSpacing: 150,
                                                ),
                                                itemCount: i.responsesSubDTO.length,
                                                itemBuilder: (BuildContext ctx, index) {
                                                  return InkWell(
                                                    onTap: () {
                                                      setState(() {
                                                        i.chosen = index;
                                                        if(currentIndex == _questionsSubDTO.length && i.chosen == index)
                                                        {
                                                          showResult = true;
                                                          _controllerCenter.play();
                                                        } else {
                                                          sliderController.nextPage(duration: new Duration(milliseconds: 650), curve: Curves.fastOutSlowIn);
                                                        }
                                                      });
                                                    },
                                                    child: Padding(
                                                      padding: const EdgeInsets.all(8.0),
                                                      child: Container(
                                                        alignment: Alignment.center,
                                                        child: Text(i.responsesSubDTO[index].label.firstWhere((translation) => translation.language == appContext.getContext().language).value != null ? i.responsesSubDTO[index].label.firstWhere((translation) => translation.language == appContext.getContext().language).value : "", textAlign: TextAlign.center, style: TextStyle(fontSize: kDescriptionSize)),
                                                        decoration: BoxDecoration(
                                                          color: i.chosen == index ? Colors.green : kBackgroundLight,
                                                          shape: BoxShape.rectangle,
                                                          borderRadius: BorderRadius.circular(10.0),
                                                          boxShadow: [
                                                            BoxShadow(
                                                              color: kBackgroundSecondGrey,
                                                              spreadRadius: 0.3,
                                                              blurRadius: 4,
                                                              offset: Offset(0, 2), // changes position of shadow
                                                            ),
                                                          ],
                                                        ),
                                                      ),
                                                    ),
                                                  );
                                                }),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                )
                            ),
                          );
                        },
                      );
                    }).toList(),
                  ),
              ],
            ),
            if(_questionsSubDTO != null && _questionsSubDTO.length > 1 && currentIndex != _questionsSubDTO.length && _questionsSubDTO[currentIndex-1].chosen != null && quizzDTO.questions.length > 0)
              Positioned(
                top: MediaQuery.of(context).size.height * 0.35,
                right: 60,
                child: InkWell(
                  onTap: () {
                    if(_questionsSubDTO[currentIndex-1].chosen != null && quizzDTO.questions.length > 0) {
                      sliderController.nextPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                      /*Fluttertoast.showToast(
                          msg: "Vous n'avez pas répondu à cette question",
                          toastLength: Toast.LENGTH_SHORT,
                          gravity: ToastGravity.BOTTOM,
                          timeInSecForIosWeb: 1,
                          backgroundColor: kMainRed,
                          textColor: Colors.white,
                          fontSize: 35.0
                      );*/
                    }
                  },
                  child: Icon(
                    Icons.chevron_right,
                    size: 150,
                    color: kMainRed,
                  ),
                )
            ),
            if(_questionsSubDTO != null && _questionsSubDTO.length > 1 && currentIndex != 1)
              Positioned(
                top: MediaQuery.of(context).size.height * 0.35,
                left: 60,
                child: InkWell(
                  onTap: () {
                    if(currentIndex > 1)
                      sliderController.previousPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                  },
                  child: Icon(
                    Icons.chevron_left,
                    size: 150,
                    color: kMainRed,
                  ),
                )
            ),
            if(_questionsSubDTO != null && _questionsSubDTO.length > 0)
              Padding(
                padding: const EdgeInsets.only(bottom: 0),
                child: Align(
                    alignment: Alignment.bottomCenter,
                    child: InkWell(
                      child: Text(
                        currentIndex.toString()+'/'+quizzDTO.questions.length.toString(),
                        style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),
                      ),
                    )
                ),
              ),
            if(_questionsSubDTO == null || _questionsSubDTO.length == 0)
                Center(child: Text("Aucune question à afficher", style: TextStyle(fontSize: kNoneInfoOrIncorrect),))
          ]
      );
  }
}