import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:dots_indicator/dots_indicator.dart';
import 'package:exampills/screens/tests/resultScreen.dart';
import 'package:exampills/providers/testProvider.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:random_color/random_color.dart';

class TestScreen extends StatefulWidget {
  final String categoryId;
  final String subcategoryId;
  final String title;
  final String testId;
  final int questPiece;
  const TestScreen(
      {Key key,
      this.categoryId,
      this.subcategoryId,
      this.testId,
      this.title,
      this.questPiece})
      : super(key: key);
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  int position;
  AudioCache audioCache = AudioCache();
  AudioPlayer audioPlayer = AudioPlayer();
  RandomColor randomColor = RandomColor();
  var controller = Get.put(TestProvider());
  PageController pageController = PageController();
  int testQuestPiece = 0;
  Future nextPage() {
    pageController.animateToPage(pageController.page.toInt() + 1,
        duration: Duration(milliseconds: 400), curve: Curves.easeIn);
  }

  void previousPage() {
    pageController.animateToPage(pageController.page.toInt() - 1,
        duration: Duration(milliseconds: 400), curve: Curves.easeIn);
  }

  getDocs() async {
    await FirebaseFirestore.instance
        .collection(
            "categories/${widget.categoryId}/subcategories/${widget.subcategoryId}/tests/${widget.testId}/questions")
        .get()
        .then((value) {
      setState(() {
        testQuestPiece = value.docs.length;
      });
    });
  }

  @override
  void initState() {
    print(controller.position);
    controller.updatePosition(0);
    getDocs();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Color color = randomColor.randomColor();
    int selectedItem;
    bool selectedBool = false;
    return Scaffold(
      backgroundColor: color,
      bottomNavigationBar: Container(
          child: DotsIndicator(
        dotsCount: testQuestPiece,
        position: controller.position,
        axis: Axis.horizontal,
        reversed: false,
        decorator: DotsDecorator(
          color: Colors.white,
          activeColor: randomColor.randomColor(),
          size: const Size.square(9.0),
          activeShape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
          activeSize: const Size(18.0, 18.0),
        ),
        mainAxisAlignment: MainAxisAlignment.center,
      )),
      appBar: AppBar(
          centerTitle: true,
          title: Text(
            widget.title,
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          leading: IconButton(
            onPressed: () {
              Navigator.pop(context);
            },
            icon: Icon(Icons.arrow_back_ios),
            color: Colors.white,
          ),
          backgroundColor: Colors.transparent,
          actions: [
            IconButton(
              icon: Icon(Icons.timer),
              onPressed: () {},
            )
          ]),
      body: Stack(
        fit: StackFit.expand,
        children: [
          StreamBuilder(
            stream: FirebaseFirestore.instance
                .collection(
                    "categories/${widget.categoryId}/subcategories/${widget.subcategoryId}/tests/${widget.testId}/questions")
                .snapshots(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
              return PageView(
                physics: NeverScrollableScrollPhysics(),
                allowImplicitScrolling: false,
                scrollDirection: Axis.horizontal,
                controller: pageController,
                onPageChanged: controller.updatePosition,
                children: snapshot.data.docs.map<Widget>((data) {
                  var datas = data.data();

                  return Stack(
                    fit: StackFit.expand,
                    children: [
                      Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                                width: 350,
                                padding: EdgeInsets.all(15),
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(30)),
                                height: 200,
                                child: Text(datas['questionTitle'],
                                    style: TextStyle(
                                        color: Colors.black, fontSize: 20))),
                            SizedBox(
                              height: 15,
                            ),
                            Expanded(
                              child: ListView.builder(
                                itemCount: datas['answers'].length,
                                itemBuilder: (context, index) {
                                  return Column(
                                    children: [
                                      InkWell(
                                        onTap: () async {
                                          if (datas['trueAnswer'] == index) {
                                            audioCache
                                                .play("sounds/correct.wav");
                                          } else {
                                            audioCache.play("sounds/wrong.wav");

                                            setState(() {
                                              selectedItem =
                                                  datas['trueAnswer'];
                                              selectedBool = true;
                                            });
                                          }
                                          await Future.delayed(
                                                  Duration(seconds: 2))
                                              .then((value) {
                                            print(pageController.page.toInt());
                                            print(testQuestPiece);
                                            if ((pageController.page.toInt() +
                                                    1) ==
                                                testQuestPiece) {
                                              Navigator.pushReplacement(
                                                  context,
                                                  MaterialPageRoute(
                                                      builder: (_) =>
                                                          ResultScreen()));
                                            } else {
                                              nextPage();
                                            }
                                          });
                                        },
                                        child: Container(
                                          width: 350,
                                          padding: EdgeInsets.all(15),
                                          decoration: BoxDecoration(
                                              color: selectedBool == true
                                                  ? (selectedItem == index
                                                      ? Colors.green
                                                      : Colors.red)
                                                  : Colors.white,
                                              borderRadius:
                                                  BorderRadius.circular(30)),
                                          height: 80,
                                          child: Text(
                                              "${index + 1}. " +
                                                  datas['answers'][index],
                                              style: TextStyle(
                                                  color: Colors.black,
                                                  fontSize: 20)),
                                        ),
                                      ),
                                      SizedBox(
                                        height: 15,
                                      ),
                                    ],
                                  );
                                },
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  );
                }).toList(),
              );
            },
          ),
        ],
      ),
    );
  }
}