import 'package:e_commerce_training/res/R.dart';
import 'package:e_commerce_training/src/model/repository/app_repository.dart';
import 'package:e_commerce_training/src/page/course_quiz/course_quiz_cubit.dart';
import 'package:e_commerce_training/src/page/course_quiz/course_quiz_state.dart';
import 'package:e_commerce_training/src/util/navigation_util.dart';
import 'package:e_commerce_training/src/util/util.dart';
import 'package:easy_localization/src/public_ext.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class CourseQuizPage extends StatefulWidget {
  const CourseQuizPage({Key? key}) : super(key: key);

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

class _CourseQuizPageState extends State<CourseQuizPage> {
  late CourseQuizCubit _cubit;

  @override
  void initState() {
    // TODO: implement initState
    AppRepository repository = AppRepository();
    _cubit = CourseQuizCubit(repository);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: R.color.grey200,
      body: BlocProvider(
        create: (context) => _cubit,
        child: BlocConsumer<CourseQuizCubit, CourseQuizState>(
          listener: (context, state) {
            if (state is CourseQuizFailure) Util.showErrorSnackBar(context, state.error);
            // TODO: implement listener
          },
          builder: (context, state) {
            return buildPage(context, state);
          },
        ),
      ),
    );
  }

  Widget buildPage(BuildContext context, CourseQuizState state) {
    return ListView(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      children: [
        SizedBox(height: 30),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              R.string.knowledge_test.tr(),
              style: TextStyle(
                fontSize: 24.sp,
                fontWeight: FontWeight.w600,
                color: R.color.black,
              ),
            ),
            InkWell(
              onTap: () {
                NavigationUtil.pop(context);
              },
              child: Icon(
                Icons.close,
                size: 30.h,
                color: R.color.black,
              ),
            )
          ],
        ),
        SizedBox(height: 20),
        Text(
          R.string.overview_of_diabetes.tr(),
          style: TextStyle(
            fontSize: 24.sp,
            fontWeight: FontWeight.w600,
            color: R.color.black,
          ),
        ),
        SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            buildStep(title: R.string.step_1.tr()),
            buildStep(title: R.string.step_2.tr()),
            buildStep(title: R.string.step_3.tr()),
            buildStep(title: R.string.step_4.tr()),
            buildStep(title: R.string.step_5.tr()),
          ],
        ),
        SizedBox(height: 10),
        Container(
          height: 750.h,
          child: PageView(
            children: <Widget>[
              buildPageView(
                question: R.string.question_1.tr(),
                title: R.string.what_foods_should_people.tr(),
              ),
              buildPageView(
                question: R.string.question_2.tr(),
                title: R.string.what_foods_should_people.tr(),
              ),
            ],
          ),
        ),
        SizedBox(height: 20),
        Container(
          color: R.color.white,
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Row(
            children: [
              InkWell(
                onTap: () {},
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: R.color.grey,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.arrow_back_ios,
                        size: 22.h,
                        color: R.color.primaryColor,
                      ),
                      SizedBox(width: 2),
                      Text(
                        R.string.back_course.tr(),
                        style: TextStyle(
                          fontSize: 20.sp,
                          fontWeight: FontWeight.w600,
                          color: R.color.primaryColor,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  alignment: Alignment.center,
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(
                        width: 1,
                        color: R.color.primaryColor,
                      )),
                  child: Text(
                    "1/5",
                    style: TextStyle(
                      fontSize: 20.sp,
                      fontWeight: FontWeight.w600,
                      color: R.color.primaryColor,
                    ),
                  ),
                ),
              ),
              InkWell(
                onTap: () {
                  showDialog<void>(
                    context: context,
                    barrierDismissible: false,
                    builder: (BuildContext context) {
                      return buildDialogCompleted(context);
                    },
                  );
                },
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: R.color.grey,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        R.string.next_question.tr(),
                        style: TextStyle(
                          fontSize: 20.sp,
                          fontWeight: FontWeight.w600,
                          color: R.color.primaryColor,
                        ),
                      ),
                      SizedBox(width: 2),
                      Icon(
                        Icons.arrow_forward_ios,
                        size: 22.h,
                        color: R.color.primaryColor,
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        )
      ],
    );
  }

  Widget buildDialogCompleted(BuildContext context) {
    return CupertinoAlertDialog(
      title: Column(
        children: [
          Image.asset(
            R.drawable.icCompleted,
            height: 100.h,
            width: 80.h,
          ),
          SizedBox(height: 10),
          Text(
            R.string.completed_quiz.tr(),
            style: TextStyle(
              fontSize: 22.sp,
              fontWeight: FontWeight.w600,
              color: R.color.black,
            ),
          ),
          SizedBox(height: 10),
          SizedBox(
            width: 200.w,
            child: Text(
              R.string.you_have_successfully_completed.tr(),
              style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.w400,
                color: R.color.black,
              ),
              maxLines: 2,
              textAlign: TextAlign.center,
            ),
          ),
          SizedBox(height: 30),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              buildButtonDialog(
                title: R.string.see_the_answer.tr(),
                callBack: () {
                  showDialog<void>(
                    context: context,
                    barrierDismissible: false,
                    builder: (BuildContext context) {
                      return buildDialogSuccess();
                    },
                  );
                },
              ),
              buildButtonDialog(
                title: R.string.continue_learning.tr(),
                callBack: () {},
              ),
            ],
          )
        ],
      ),
    );
  }

  Widget buildDialogSuccess() {
    return CupertinoAlertDialog(
      title: Column(
        children: [
          Image.asset(
            R.drawable.icSuccess,
            height: 100.h,
            width: 80.h,
          ),
          SizedBox(height: 10),
          Text(
            R.string.completed_quiz.tr(),
            style: TextStyle(
              fontSize: 22.sp,
              fontWeight: FontWeight.w600,
              color: R.color.black,
            ),
          ),
          SizedBox(height: 10),
          SizedBox(
            width: 150.w,
            child: Text(
              R.string.you_have_completed.tr(),
              style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.w400,
                color: R.color.black,
              ),
              maxLines: 2,
              textAlign: TextAlign.center,
            ),
          ),
          SizedBox(height: 10),
          Text(
            R.string.challenge_yourself_again.tr(),
            style: TextStyle(
              fontSize: 20.sp,
              fontWeight: FontWeight.w600,
              color: R.color.black,
            ),
          ),
          SizedBox(height: 30),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              buildButtonDialog(
                title: R.string.skip_quiz.tr(),
                callBack: () {},
              ),
              buildButtonDialog(title: R.string.success_quiz.tr(), callBack: () {})
            ],
          )
        ],
      ),
    );
  }

  Widget buildButtonDialog({String? title, VoidCallback? callBack}) {
    return GestureDetector(
      onTap: callBack,
      child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                width: 2,
                color: R.color.primaryColor,
              )),
          child: Text(
            title ?? "",
            style: TextStyle(
              fontSize: 18.sp,
              fontWeight: FontWeight.w600,
              color: R.color.primaryColor,
            ),
          )),
    );
  }

  Widget buildPageView({String? question, String? title}) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
      margin: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: R.color.white,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            question ?? "",
            style: TextStyle(
              fontSize: 22.sp,
              fontWeight: FontWeight.w400,
              color: R.color.black,
            ),
          ),
          SizedBox(height: 10),
          Text(
            title ?? "",
            style: TextStyle(
              fontSize: 24.sp,
              fontWeight: FontWeight.w600,
              color: R.color.black,
            ),
            maxLines: 2,
          ),
          SizedBox(height: 10),
          buildCheck(name: R.string.selected_normal.tr()),
          buildCheck(name: R.string.unselected_normal.tr()),
          buildCheck(name: R.string.unselected_normal.tr()),
          buildCheck(name: R.string.unselected_normal.tr()),
          SizedBox(height: 10),
          Center(
            child: Image.asset(
              R.drawable.icSilver,
              height: 100.h,
              width: 60.h,
            ),
          ),
          Center(
            child: SizedBox(
              width: 200.w,
              child: Text(
                R.string.congratulations_your_reply_is_correct.tr(),
                style: TextStyle(
                  fontSize: 22.sp,
                  fontWeight: FontWeight.w400,
                  color: R.color.black,
                ),
                maxLines: 2,
                textAlign: TextAlign.center,
              ),
            ),
          ),
          SizedBox(height: 10),
          Center(
            child: InkWell(
              onTap: () {},
              child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(
                        width: 2,
                        color: R.color.primaryColor,
                      )),
                  child: Text(
                    R.string.check_course.tr(),
                    style: TextStyle(
                      fontSize: 20.sp,
                      fontWeight: FontWeight.w600,
                      color: R.color.primaryColor,
                    ),
                  )),
            ),
          )
        ],
      ),
    );
  }

  Widget buildCheck({String? name}) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      margin: EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          color: R.color.grey,
          border: Border.all(width: 1, color: R.color.primaryColor)),
      child: Row(
        children: [
          Checkbox(
            value: _cubit.check,
            splashRadius: 20,
            onChanged: (value) {
              _cubit.checkBox(_cubit.check);
            },
          ),
          SizedBox(width: 5),
          Text(
            name ?? "",
            style: TextStyle(
              fontSize: 20.sp,
              fontWeight: FontWeight.w600,
              color: R.color.black,
            ),
          ),
        ],
      ),
    );
  }

  Widget buildStep({String? title}) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(
        border: Border.all(
          width: 2,
          color: R.color.primaryColor,
        ),
        shape: BoxShape.circle,
      ),
      child: Center(
        child: Text(
          title ?? "",
          style: TextStyle(
            fontSize: 22.sp,
            fontWeight: FontWeight.w600,
            color: R.color.black,
          ),
        ),
      ),
    );
  }
}
