import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/flavors.dart';
import 'package:star_lock/mine/minePersonInfo/minePersonInfoSetSafetyProblem/minePersonInfoSetSafetyProblem_entity.dart';
import 'package:star_lock/mine/minePersonInfo/minePersonInfoSetSafetyProblem/minePersonInfoSetSafetyProblem_logic.dart';
import 'package:star_lock/mine/minePersonInfo/minePersonInfoSetSafetyProblem/minePersonInfoSetSafetyProblem_state.dart';
import 'package:star_lock/tools/custom_bottom_sheet.dart';

import '../../../app_settings/app_colors.dart';
import '../../../tools/commonItem.dart';
import '../../../tools/submitBtn.dart';
import '../../../tools/titleAppBar.dart';

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

  @override
  State<MinePersonInfoSetSafetyProblemPage> createState() =>
      _MinePersonInfoSetSafetyProblemPageState();
}

class _MinePersonInfoSetSafetyProblemPageState
    extends State<MinePersonInfoSetSafetyProblemPage> {
  final MineSetSafetyProblemLogic logic = Get.put(MineSetSafetyProblemLogic());
  final MineSetSafetyProblemState state = Get.find<MineSetSafetyProblemLogic>().state;

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

    logic.getQuestionListRequest();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: F.sw(
          skyCall: () => TitleAppBar(
            barTitle: '安全问题'.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor,
          ),
          xhjCall: () => TitleAppBar(
            barTitle: '安全问题'.tr,
            haveBack: true,
            backgroundColor: Colors.white,
            iconColor: AppColors.blackColor,
            titleColor: AppColors.blackColor,
          ),
        ),
        body: ListView(
          children: [
            Container(
                width: 1.sw,
                color: AppColors.greyBackgroundColor,
                padding: EdgeInsets.all(20.h),
                child: Text(
                  '当你手机丢了，可以通过回答设置的安全问题来登录新设备'.tr,
                  style: TextStyle(fontSize: 18.sp),
                )),
            Obx(() => _safityProblemItem(
                    state.firstProblemStr.value,
                    state.firstAnswerStr.value,
                    state.fristAnswerController, () {
                  _selectProblemBottomSheet(state.firstProblemList, 1);
                })),
            SizedBox(height: 10.h),
            Obx(() => _safityProblemItem(
                    state.secondProblemStr.value,
                    state.secondAnswerStr.value,
                    state.secondAnswerController, () {
                  _selectProblemBottomSheet(state.secondProblemList, 2);
                })),
            SizedBox(height: 10.h),
            Obx(() => _safityProblemItem(
                    state.thirdProblemStr.value,
                    state.thirdAnswerStr.value,
                    state.thirdAnswerController, () {
                  _selectProblemBottomSheet(state.thirdProblemList, 3);
                })),
            SizedBox(
              height: 50.h,
            ),
            Obx(() => Container(
                  padding: EdgeInsets.only(left: 20.w, right: 20.w),
                  child: SubmitBtn(
                      btnName: '确定'.tr,
                      isDisabled: state.canSub.value,
                      onClick: () {
                        if (state.isUpdateAnswer.value) {
                          //修改安全信息
                          logic.updateSafeAnswerRequest();
                        } else {
                          //设置安全信息
                          logic.setSafeAnswerRequest();
                        }
                      }),
                )),
          ],
        ));
  }

  Widget _safityProblemItem(String problemTitle, String answerTitle,
      TextEditingController controller, Function() action) {
    Widget view = Column(
      children: [
        CommonItem(
            leftTitel: problemTitle,
            rightTitle: '',
            isHaveLine: true,
            isHaveDirection: true,
            action: action),
        Container(
          color: Colors.white,
          padding: EdgeInsets.only(left: 35.w),
          child: TextField(
            //输入框一行
            maxLines: 1,
            controller: controller,
            onChanged: (value) {
              logic.checkNext(controller);
            },
            autofocus: false,
            decoration: InputDecoration(
                //输入里面输入文字内边距设置
                // contentPadding: const EdgeInsets.only(top: 8.0, left: -19.0, right: -15.0, bottom: 8.0),
                // labelText: label,
                hintText: '请输入你的答案'.tr,
                //不需要输入框下划线
                border: InputBorder.none,
                hintStyle: TextStyle(fontSize: 22.sp)),
            obscureText: false,
          ),
        )
      ],
    );
    view = F.sw(
        skyCall: () => view,
        xhjCall: () => Container(
              margin: EdgeInsets.only(top: 20.h, left: 20.w, right: 20.w),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(20.r))),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20.r),
                child: view,
              ),
            ));
    return view;
  }

  Future _selectProblemBottomSheet(List dataList, int problemIndex) async {
    final List<String> getProblemList = [];
    for (int i = 0; i < dataList.length; i++) {
      final SafetyProblemData data = dataList[i];
      getProblemList.add(data.question!);
    }
    showModalBottomSheet(
        context: context,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadiusDirectional.circular(10)),
        builder: (BuildContext context) {
          return AlertBottomWidget(
            topTitle: '选择问题'.tr,
            items: getProblemList,
            chooseCallback: (value) {
              final int getSelectIndex = value;
              final String getSelectProblem = getProblemList[getSelectIndex];
              final SafetyProblemData data = dataList[getSelectIndex];
              if (problemIndex == 1) {
                // SafetyProblemData data = dataList[getSelectIndex];
                state.firstProblemStr.value = getSelectProblem;
                state.firstQuestionId.value = data.questionId!;
              } else if (problemIndex == 2) {
                // SafetyProblemData data = dataList[getSelectIndex];
                state.secondProblemStr.value = getSelectProblem;
                state.secondQuestionId.value = data.questionId!;
              } else if (problemIndex == 3) {
                // SafetyProblemData data = dataList[getSelectIndex];
                state.thirdProblemStr.value = getSelectProblem;
                state.thirdQuestionId.value = data.questionId!;
              }
              state.canSub.value = true;
            },
          );
        });
  }
}