// 设置
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:marking_app/common/model/enum/KeyboardType.dart';
import 'package:marking_app/common/model/marking/do_marking_keyboard_model.dart';
import 'package:marking_app/provider/do_marking_provider.dart';
import 'package:marking_app/routes/RouterManager.dart';
import 'package:marking_app/utils/index.dart';
import 'package:marking_app/utils/toast_utils.dart';

class SetingBox extends ConsumerWidget {
  final Function closeHandle;
  final Function viewWholeTestPaper;
  final Function viewAnswer;
  final Function exitPaper;
  final Function setingOperation;
  const SetingBox(
      {required this.closeHandle,
      required this.viewWholeTestPaper,
      required this.viewAnswer,
      required this.exitPaper,
      required this.setingOperation,
      Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    DoMarkingKeyboardModel model = ref.watch(markingKeyboardProvider);
    bool isBroadwise = model.screenDirection == ScreenDirection.HORIZONTAL_SCREEN; // 是否横向
    double textSize = isBroadwise ? 14.sp : 12.sp;
    return Stack(
      alignment: const FractionalOffset(0.88, 0.14),
      children: [
        Container(
          height: double.infinity,
          width: double.infinity,
          color: const Color.fromRGBO(0, 0, 0, 0.65),
          padding: EdgeInsets.symmetric(horizontal: isBroadwise ? 50.w : 30.w, vertical: 112.h),
          child: Wrap(
            direction: Axis.horizontal,
            //横向间距
            spacing: 28.w,
            //竖向间距
            runSpacing: 40.h,
            //横向对齐方式
            alignment: WrapAlignment.spaceBetween,
            runAlignment: WrapAlignment.center,
            children: [
              // 阅卷设置
              InkWell(
                onTap: () => setingOperation(true),
                child: SizedBox(
                  width: 60.w,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Image.asset("assets/images/marking_settings.png", height: 32.w, width: 32.w, fit: BoxFit.cover),
                      Container(height: 4.h),
                      Text(
                        '偏好设置',
                        style: TextStyle(
                          fontSize: textSize,
                          color: Colors.white,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              // 竖屏模式
              InkWell(
                onTap: () {
                  ScreenDirection screenDirection = model.screenDirection;
                  model.screenDirection = screenDirection == ScreenDirection.HORIZONTAL_SCREEN
                      ? ScreenDirection.VERTICAL_SCREEN
                      : ScreenDirection.HORIZONTAL_SCREEN;

                  if (model.keyboard == KeyboardType.INPUT_TYPE &&
                      model.screenDirection == ScreenDirection.VERTICAL_SCREEN) {
                    // 如果当前是输入键盘并且是竖屏模式就把键盘改为底部键盘
                    model.keyboard = KeyboardType.BOTTOM_SELECTION;
                  }
                  print(model.toJson());
                  try {
                    ref
                        .read(markingKeyboardProvider.notifier)
                        .toggleKeyboard(DoMarkingKeyboardModel.fromJson(model.toJson()))
                        .then((value) => closeHandle());
                  } catch (e) {}
                },
                child: SizedBox(
                    width: 60.w,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Image.asset("assets/images/vertical_screen_btn.png",
                            height: 32.w, width: 32.w, fit: BoxFit.cover),
                        Container(height: 4.h),
                        Text(
                          model.screenDirection == ScreenDirection.HORIZONTAL_SCREEN ? '竖屏模式' : '横屏模式',
                          style: TextStyle(
                            fontSize: textSize,
                            color: Colors.white,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                      ],
                    )),
              ),
              // 查看答案
              InkWell(
                onTap: () => viewAnswer(),
                child: SizedBox(
                  width: 60.w,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Image.asset("assets/images/do_marking_answer.png", height: 32.w, width: 32.w, fit: BoxFit.cover),
                      Container(height: 4.h),
                      Text(
                        '查看答案',
                        style: TextStyle(
                          fontSize: textSize,
                          color: Colors.white,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              // 隐藏试题ID
              InkWell(
                onTap: () {
                  bool isBroadwise = model.screenDirection == ScreenDirection.HORIZONTAL_SCREEN; // 是否是横屏
                  if (!isBroadwise) {
                    // 竖屏无法展示 试题ID
                    // ignore: void_checks
                    return ToastUtils.showInfo('竖屏模式下，无法展示试题ID');
                  }
                  model.hideQuestionId = !model.hideQuestionId;
                  setTimeOut(
                      0,
                      () => {
                            ToastUtils.showSuccess(!model.hideQuestionId ? '隐藏试题ID' : '展示试题ID',
                                duration: const Duration(milliseconds: 500))
                          });
                  ref.read(markingKeyboardProvider.notifier).toggleKeyboard(model);
                  closeHandle();
                },
                child: SizedBox(
                  width: 60.w,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Image.asset("assets/images/hide_question_id.png", height: 32.w, width: 32.w, fit: BoxFit.cover),
                      Container(height: 4.h),
                      Text(
                        '${model.hideQuestionId ? '隐藏' : '显示'}试卷编号',
                        style: TextStyle(
                          fontSize: isBroadwise ? 14.sp : 10.sp,
                          color: Colors.white,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              // 查看整卷
              InkWell(
                onTap: () => viewWholeTestPaper(context),
                child: SizedBox(
                  width: 60.w,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Image.asset("assets/images/do_marking_test_paper.png",
                          height: 32.w, width: 32.w, fit: BoxFit.cover),
                      Container(height: 4.h),
                      Text(
                        '查看整卷',
                        style: TextStyle(
                          fontSize: textSize,
                          color: Colors.white,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ],
                  ),
                ),
              ),

              // 退出阅卷
              InkWell(
                onTap: () {
                  WidgetsFlutterBinding.ensureInitialized(); //不加这个强制横/竖屏会报错
                  SystemChrome.setPreferredOrientations([
                    // 强制竖屏
                    DeviceOrientation.portraitUp,
                    DeviceOrientation.portraitDown
                  ]);
                  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
                      overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]);

                  exitPaper();
                  RouterManager.router.pop(context);
                },
                child: SizedBox(
                  width: 60.w,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Image.asset("assets/images/do_exit_marking.png", height: 32.w, width: 32.w, fit: BoxFit.cover),
                      Container(height: 4.h),
                      Text(
                        '退出阅卷',
                        style: TextStyle(
                          fontSize: textSize,
                          color: Colors.white,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
        InkWell(
          onTap: () => closeHandle(),
          child: Icon(
            Icons.clear_sharp,
            color: const Color.fromARGB(255, 229, 233, 238),
            size: 40.sp,
          ),
        )
      ],
    );
  }
}
