import 'package:dreampad/app/shared/shared.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';

import '../controllers/question_controller.dart';

class QuestionView extends GetView<QuestionController> {
  const QuestionView({Key? key}) : super(key: key);
  @override
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: Images.questionBg,
            fit: BoxFit.fill,
          ),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          body: buildBody(context),
        ),
      ),
    );
  }

  Widget buildBody(BuildContext context) {
    return Obx(
      () => Stack(
        children: [
          Positioned(
            top: 38.h,
            left: 30.w,
            child: MyBackButton(
              onPressed: () {
                Get.back();
              },
            ),
          ),
          Positioned(
            top: controller.ipTop.value.h,
            left: controller.ipLeft.value.w,
            child: Images.ip,
          ),
          Positioned(
            top: 78.h,
            left: 451.w,
            child: !controller.allAnswer.value
                ? buildDialog(context)
                : const RSizedBox(),
          ),
          RSizedBox(
            child: Stack(
                children: controller.questionAnswers.map((element) {
              if (element.value.display!) {
                return Positioned(
                  top: element.value.top!.h,
                  left: element.value.left!.w,
                  child: buildAnswer(
                    context,
                    element.value.index!,
                    element.value.answer!,
                  ),
                );
              } else {
                return Container();
              }
            }).toList()),
          ),
          Positioned(
            bottom: 3.h,
            left: 416.w,
            child: controller.allAnswer.value
                ? Images.questionRecommended
                : const RSizedBox(),
          ),
        ],
      ),
    );
  }

  Widget buildAnswer(BuildContext context, int index, String answer) {
    return Container(
      width: 369.w,
      height: 160.h,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: Images.questionAnswer,
          fit: BoxFit.fill,
        ),
      ),
      child: Stack(
        children: [
          Positioned(
            top: 23.h,
            left: 68.w,
            child: Text(
              index.toString(),
              style: TextStyles.boldColor24,
            ),
          ),
          Positioned(
            top: 25.h,
            left: 105.w,
            child: Text(
              '问题回答',
              style: TextStyles.boldColor20,
            ),
          ),
          Positioned(
            top: 65.h,
            left: 85.w,
            child: RSizedBox(
              height: 64.h,
              width: 230.w,
              child: Text(
                answer,
                style: TextStyles.mediumWhite18,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildDialog(BuildContext context) {
    return Obx(
      () => Container(
        width: 464.w,
        height: 270.h,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: Images.questionDialog,
            fit: BoxFit.fill,
          ),
        ),
        padding: REdgeInsets.only(top: 45.0, left: 45.0, right: 45.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              controller.question.value,
              style: TextStyles.mediumWhiteShadow18_034,
            ),
            ImageTxtButton(
              text: controller.btnTxt.value,
              imgName: 'question/btn_icon_begin',
              textStyle: TextStyles.boldWhite20_014,
              width: 186.0,
              height: 54.0,
              onPressed: () async {
                await controller.setStep();
                if (controller.showQuestionDialog.value) {
                  SmartDialog.show(
                    alignment: Alignment.topCenter,
                    onDismiss: () async {
                      FocusScope.of(context).requestFocus();
                      if (controller.textController.text.isNotEmpty) {
                        await controller
                            .updateAnswer(controller.textController.text);
                      }
                    },
                    maskColor: const Color(0xFF080F3D).withOpacity(0.8),
                    builder: (_) {
                      return QuestionDialog(
                        question: controller.question.value,
                        controller: controller.textController,
                      );
                    },
                  );
                }
              },
            ),
            const RSizedBox(
              height: 6.0,
            ),
          ],
        ),
      ),
    );
  }
}