import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/checkingIn/checkingInStaff/checkingInSetAddStaff/checkingInAddStaffSelectKey_entity.dart';
import 'package:star_lock/main/lockDetail/checkingIn/checkingInStaff/checkingInSetAddStaff/checkingInAddStaff_state.dart';
import 'package:star_lock/tools/commonDataManage.dart';

import '../../../../../appRouters.dart';
import '../../../../../app_settings/app_colors.dart';
import '../../../../../tools/commonItem.dart';
import '../../../../../tools/showBottomSheetTool.dart';
import '../../../../../tools/submitBtn.dart';
import '../../../../../tools/titleAppBar.dart';
import '../../../../../translations/trans_lib.dart';
import 'checkingInAddStaff_logic.dart';

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

  @override
  State<CheckingInAddStaffPage> createState() => _CheckingInAddStaffPageState();
}

class _CheckingInAddStaffPageState extends State<CheckingInAddStaffPage> {
  final CheckingInAddStaffLogic logic = Get.put(CheckingInAddStaffLogic());
  final CheckingInAddStaffState state =
      Get.find<CheckingInAddStaffLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.mainBackgroundColor,
      appBar: TitleAppBar(
          barTitle:
              "${state.isAdd.value == "1" ? TranslationLoader.lanKeys!.add!.tr : "编辑".tr}${TranslationLoader.lanKeys!.staff!.tr}",
          haveBack: true,
          backgroundColor: AppColors.mainColor),
      body: Column(
        children: <Widget>[
          // 姓名
          CommonItem(
              leftTitel: TranslationLoader.lanKeys!.name!.tr,
              rightTitle: '',
              isHaveLine: true,
              isHaveRightWidget: true,
              rightWidget: getTFWidget(
                  '${TranslationLoader.lanKeys!.pleaseEnter!.tr}${TranslationLoader.lanKeys!.name!.tr}',
                  state.staffNameController)),
          // 选择打卡方式
          Obx(() => CommonItem(
              leftTitel: TranslationLoader.lanKeys!.punchingMode!.tr,
              rightTitle: state.selectPrintingMethodStr.value,
              isHaveLine: false,
              isHaveDirection: true,
              action: () {
                final List<String> list = <String>[
                  'APP',
                  '密码'.tr,
                  '卡'.tr,
                  '指纹'.tr
                ];

                // if (state.getKeyInfosData.value.lockName!.contains('T9A')) {
                if (CommonDataManage().currentKeyInfo.lockFeature?.d3Face ==
                    1) {
                  list.add('人脸'.tr);
                }
                _showSelectClockInType(list, list, list, '1', '选择钥匙'.tr);
              })),
          SizedBox(height: 10.h),
          //员工是否有App、卡、钥匙、指纹必须显示
          Obx(() => CommonItem(
              leftTitel: addStaffGetIfHaveKey(),
              rightTitle: '',
              isHaveLine: true,
              isHaveRightWidget: true,
              rightWidget: Row(
                children: <Widget>[
                  whetherTheEmployeeHasAKeyWidget(
                      '无'.tr, state.appUnHaveAccount.value, () {
                    setState(() {
                      state.appUnHaveAccount.value = true;
                      state.attendanceWayNumber.value = '';
                      logic.isCanClickAction();
                    });
                  }),
                  SizedBox(
                    width: 30.w,
                  ),
                  whetherTheEmployeeHasAKeyWidget(
                      '有'.tr, !state.appUnHaveAccount.value, () {
                    setState(() {
                      state.appUnHaveAccount.value = false;
                      state.attendanceWayNumber.value = '';
                      logic.isCanClickAction();
                    });
                  }),
                ],
              ))),
          // 当选择App时且没有钥匙的时候 显示输入账号输入框和选择国家 其他隐藏
          Obx(() => Visibility(
                visible: state.appUnHaveAccount.value &&
                    state.selectPrintingMethodType.value == '1',
                child: Column(
                  children: <Widget>[
                    CommonItem(
                        leftTitel: TranslationLoader.lanKeys!.accountNumber!.tr,
                        rightTitle: '',
                        isHaveLine: true,
                        isHaveRightWidget: true,
                        rightWidget: getTFWidget(
                            "${TranslationLoader.lanKeys!.pleaseEnter!.tr}${"员工".tr}${TranslationLoader.lanKeys!.accountNumber!.tr}",
                            state.staffAccountController)),
                    CommonItem(
                      leftTitel:
                          TranslationLoader.lanKeys!.countryAndRegion!.tr,
                      rightTitle: '',
                      isHaveLine: true,
                      isHaveRightWidget: true,
                      isHaveDirection: true,
                      rightWidget: Text(
                        '${state.countryName.value} +${state.countryCode.value}',
                        textAlign: TextAlign.end,
                        style: TextStyle(
                            fontSize: 22.sp,
                            color: AppColors.darkGrayTextColor),
                      ),
                      action: () async {
                        final Object? result = await Navigator.pushNamed(
                            context, Routers.selectCountryRegionPage);
                        if (result != null) {
                          result as Map<String, dynamic>;
                          state.countryCode.value = result['code'];
                          state.countryName.value = result['countryName'];
                          setState(() {});
                        }
                      },
                    ),
                  ],
                ),
              )),
          // 当选择密码、卡、指纹时显示
          Obx(() => Visibility(
                visible: state.selectPrintingMethodType.value != '1' &&
                    state.appUnHaveAccount.value,
                child: CommonItem(
                    leftTitel: addStaffGetKeyType(),
                    isHaveLine: false,
                    isHaveRightWidget: true,
                    rightWidget: Row(
                      children: <Widget>[
                        Obx(() => Text(state.attendanceWayNumber.value,
                            style: TextStyle(fontSize: 24.sp))),
                        SizedBox(width: 30.w),
                        GestureDetector(
                          onTap: () async {
                            switch (int.parse(
                                state.selectPrintingMethodType.value)) {
                              case 2:
                                // 获取密码
                                logic.getKeyboardPwdRequest();
                                break;
                              case 3:
                                // 卡
                                if (state.staffNameController.text.isEmpty) {
                                  logic.showToast('请输入姓名'.tr);
                                  return;
                                }

                                final dynamic data = await Get.toNamed(
                                    Routers.addCardPage,
                                    arguments: <String, Object?>{
                                      'lockId':
                                          state.getKeyInfosData.value.lockId,
                                      'fromType': 2, // 1从添加钥匙列表进入 2从考勤添加员工入口进入
                                      'fromTypeTwoStaffName':
                                          state.staffNameController.text
                                    });
                                if (data != null) {}
                                break;
                              case 4:
                                // 指纹
                                if (state.staffNameController.text.isEmpty) {
                                  logic.showToast('请输入姓名'.tr);
                                  return;
                                }

                                final data = await Get.toNamed(
                                    Routers.addFingerprintTypePage,
                                    arguments: <String, Object?>{
                                      'lockId':
                                          state.getKeyInfosData.value.lockId,
                                      'fromType': 2, // 1从添加钥匙列表进入 2从考勤添加员工入口进入
                                      'fromTypeTwoStaffName':
                                          state.staffNameController.text
                                    });
                                if (data != null) {}
                                break;
                              case 5:
                                Get.toNamed(Routers.addFaceTypePage,
                                    arguments: <String, Object?>{
                                      'lockId':
                                          state.getKeyInfosData.value.lockId,
                                      'fromType': 2, // 1从添加钥匙列表进入 2从考勤添加员工入口进入
                                      'fromTypeTwoStaffName':
                                          state.staffNameController.text
                                    });

                                break;
                            }
                          },
                          child: Container(
                            height: 40.h,
                            padding: EdgeInsets.only(
                              left: 25.w,
                              right: 25.w,
                            ),
                            decoration: BoxDecoration(
                              color: AppColors.mainColor,
                              borderRadius: BorderRadius.circular(20.h),
                            ),
                            child: Center(
                              child: Text(addStaffSelectKeyType(),
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 22.sp)),
                            ),
                          ),
                        ),
                      ],
                    )),
              )),
          // 当选择钥匙类型为有时 必显示
          Obx(() {
            final bool isPass = state.selectPrintingMethodType.value == '2';
            String attendanceWayNumber = state.attendanceWayNumber.value;
            final String attendanceWayName = state.attendanceWayName.value;
            if (isPass) {
              attendanceWayNumber = showPass(attendanceWayNumber);
            }
            String rightTitle = attendanceWayNumber;
            if (attendanceWayName.trim() != '') {
              rightTitle = '$attendanceWayName - ' + rightTitle;
            }
            return Visibility(
              visible: !state.appUnHaveAccount.value,
              child: CommonItem(
                  leftTitel: addStaffGetKeyType(),
                  rightTitle: rightTitle,
                  isHaveLine: false,
                  isHaveDirection: true,
                  action: () {
                    logic.addStaffSelectKey(
                        (List<CheckingInAddStaffKeyEntity> v) {
                      final List<String> showList = <String>[];
                      final List<String> nameList = <String>[];
                      final List<String> numberList = <String>[];
                      for (final CheckingInAddStaffKeyEntity element in v) {
                        final bool isPass =
                            state.selectPrintingMethodType.value == '2';
                        String attendanceWay = element.attendanceWay ?? '';
                        if (isPass) {
                          attendanceWay = showPass(attendanceWay);
                        }
                        final String text =
                            '${element.staffName} - $attendanceWay';
                        showList.add(text);
                        numberList.add(element.attendanceWay ?? '');
                        nameList.add(element.staffName ?? '');
                      }
                      _showSelectClockInType(showList, numberList, nameList,
                          '2', addStaffSelectKeySelectClockInType());
                    });
                  }),
            );
          }),
          SizedBox(height: 50.w),
          Obx(() => SubmitBtn(
              btnName: TranslationLoader.lanKeys!.sure!.tr,
              borderRadius: 20.w,
              margin: EdgeInsets.only(left: 30.w, right: 30.w, top: 30.w),
              padding: EdgeInsets.only(top: 25.w, bottom: 25.w),
              isDisabled: state.isCanClick.value,
              onClick: state.isCanClick.value
                  ? () {
                      if (state.isAdd.value == '2') {
                        logic.editStaffLoadData();
                      } else {
                        logic.addStaffLoadData();
                      }
                    }
                  : null))
        ],
      ),
    );
  }

  //显示密码
  String showPass(String text) {
    final int length = text.length;
    if (length > 4) {
      return text.substring(0, length - 4) + '****';
    } else if (length > 00) {
      return '****';
    }
    return '';
  }

  Widget getTFWidget(String tfStr, TextEditingController tf) {
    return SizedBox(
      // height: 50.h,
      width: 300.w,
      // color: Colors.red,
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              //输入框一行
              maxLines: 1,
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.deny('\n'),
                // LengthLimitingTextInputFormatter(30),
              ],
              style: TextStyle(
                  fontSize: 22.sp, color: AppColors.darkGrayTextColor),
              controller: tf,
              autofocus: false,
              textAlign: TextAlign.end,
              onChanged: (String v) {
                logic.changeInput(tf);
              },
              decoration: InputDecoration(
                //输入里面输入文字内边距设置
                // contentPadding: const EdgeInsets.only(top: 12.0, bottom: 8.0),
                hintText: tfStr,
                hintStyle: TextStyle(fontSize: 22.sp),
                focusedBorder: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                disabledBorder: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                enabledBorder: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                border: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                contentPadding: const EdgeInsets.symmetric(vertical: 0),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // type 1 打卡方式 2选择钥匙
  void _showSelectClockInType(List<String> showList, List<String> numberList,
      List<String> nameList, String showBottomSheetToolType, String title) {
    ShowBottomSheetTool().showSingleRowPicker(
        //上下文
        context,
        //默认的索引
        normalIndex: 0,
        title: title,
        cancelTitle: TranslationLoader.lanKeys!.cancel!.tr,
        sureTitle: TranslationLoader.lanKeys!.sure!.tr,
        //要显示的列表
        //可自定义数据适配器
        //adapter: PickerAdapter(),
        data: showList,
        //选择事件的回调
        clickCallBack: (int index, Object str) {
      setState(() {
        if (showBottomSheetToolType == '1') {
          state.selectPrintingMethodType.value = (index + 1).toString();
          state.selectPrintingMethodStr.value = str.toString();
          state.attendanceWayName.value = '';
          state.attendanceWayNumber.value = '';
        } else {
          state.attendanceWayName.value = nameList[index].toString();
          state.attendanceWayNumber.value = numberList[index].toString();
        }
        logic.isCanClickAction();
      });
    });
  }

  Widget whetherTheEmployeeHasAKeyWidget(
      String title, bool appUnHaveAccount, Function() action) {
    return GestureDetector(
      onTap: action,
      child: Container(
        // width: 80.w,
        height: 65.w,
        padding: EdgeInsets.only(left: 10.w, right: 10.w),
        // color: Colors.red,
        child: Row(
          children: <Widget>[
            Image.asset(
              appUnHaveAccount
                  ? 'images/icon_round_select.png'
                  : 'images/icon_round_unSelect.png',
              width: 26.w,
              height: 26.w,
            ),
            SizedBox(
              width: 5.w,
            ),
            Text(
              title,
              style: TextStyle(
                fontSize: 22.sp,
              ),
            ),
          ],
        ),
      ),
    );
  }

  String addStaffGetIfHaveKey() {
    String title = '';
    switch (int.parse(state.selectPrintingMethodType.value)) {
      case 1:
        title = TranslationLoader.lanKeys!.whetherTheEmployeeHasAKey!.tr;
        break;
      case 2:
        title = TranslationLoader.lanKeys!.whetherTheEmployeeHasPassword!.tr;
        break;
      case 3:
        title = TranslationLoader.lanKeys!.whetherTheEmployeeHasCard!.tr;
        break;
      case 4:
        title = TranslationLoader.lanKeys!.whetherTheEmployeeHasFingerprint!.tr;
        break;
      case 4:
        title = '员工是否有人脸'.tr;
        break;
    }
    return title;
  }

  String addStaffGetKeyType() {
    String title = '';
    switch (int.parse(state.selectPrintingMethodType.value)) {
      case 1:
        title = TranslationLoader.lanKeys!.accountNumber!.tr;
        break;
      case 2:
        title = TranslationLoader.lanKeys!.password!.tr;
        break;
      case 3:
        title = TranslationLoader.lanKeys!.card!.tr;
        break;
      case 4:
        title = TranslationLoader.lanKeys!.fingerprint!.tr;
        break;
      case 5:
        title = TranslationLoader.lanKeys!.humanFace!.tr;
        break;
    }
    return title;
  }

  String addStaffSelectKeyType() {
    String title = '';
    switch (int.parse(state.selectPrintingMethodType.value)) {
      case 1:
        title = TranslationLoader.lanKeys!.getKey!.tr;
        break;
      case 2:
        title = TranslationLoader.lanKeys!.getPassword!.tr;
        break;
      case 3:
        title = TranslationLoader.lanKeys!.getCard!.tr;
        break;
      case 4:
        title = TranslationLoader.lanKeys!.getFingerprint!.tr;
        break;
      case 5:
        title = '获取人脸'.tr;
        break;
    }
    return title;
  }

  String addStaffSelectKeySelectClockInType() {
    String title = '';
    switch (int.parse(state.selectPrintingMethodType.value)) {
      case 1:
        title = '选择钥匙'.tr;
        break;
      case 2:
        title = '选择密码'.tr;
        break;
      case 3:
        title = '选择卡'.tr;
        break;
      case 4:
        title = '选择指纹'.tr;
        break;
      case 5:
        title = '选择人脸'.tr;
        break;
    }
    return title;
  }
}