import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/face/faceList/faceList_state.dart';
import 'package:star_lock/main/lockDetail/fingerprint/fingerprintList/fingerprintListData_entity.dart';
import 'package:star_lock/tools/keySearchWidget.dart';
import 'package:star_lock/tools/left_slide/left_slide_actions.dart';
import 'package:star_lock/tools/showTipView.dart';

import '../../../../appRouters.dart';
import '../../../../app_settings/app_colors.dart';
import '../../../../tools/EasyRefreshTool.dart';
import '../../../../tools/appRouteObserver.dart';
import '../../../../tools/noData.dart';
import '../../../../tools/storage.dart';
import '../../../../tools/submitBtn.dart';
import '../../../../tools/titleAppBar.dart';
import '../../../lockMian/lockMain/lockMain_logic.dart';
import 'faceList_logic.dart';

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

  @override
  State<FaceListPage> createState() => _FaceListPageState();
}

class _FaceListPageState extends State<FaceListPage> with RouteAware {
  final FaceListLogic logic = Get.put(FaceListLogic());
  final FaceListState state = Get.find<FaceListLogic>().state;

  Future<void> getHttpData({required bool isRefresh}) async {
    final bool? isDemoMode = await Storage.getBool(ifIsDemoModeOrNot);
    if (isDemoMode == false) {
      logic.getFaceListData(isRefresh: isRefresh).then((FingerprintListDataEntity value) {
        if (mounted) {
          setState(() {});
        }
      });
    }
  }

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

    getHttpData(isRefresh: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.mainBackgroundColor,
      resizeToAvoidBottomInset: false,
      appBar: TitleAppBar(
        barTitle: '人脸'.tr,
        haveBack: true,
        backgroundColor: AppColors.mainColor,
        actionsList: <Widget>[
          TextButton(
            child: Text(
              '重置'.tr,
              style: TextStyle(color: Colors.white, fontSize: 24.sp),
            ),
            onPressed: () async {
              final bool? isDemoMode = await Storage.getBool(ifIsDemoModeOrNot);
              if (isDemoMode == false) {
                final bool isNetWork =
                    await LockMainLogic.to()?.judgeTheNetwork() ?? false;
                if (!isNetWork) {
                  return;
                }

                // showDeletAlertDialog(context);
                ShowTipView().showIosTipWithContentDialog(
                    '重置后，该锁的人脸都将被删除哦，确认要重置吗?'.tr, () async {
                  state.isDeletAll = true;
                  state.deletKeyID = '1';
                  state.deletFaceNo = 0;

                  logic.senderAddFace();
                });
              } else {
                // Get.toNamed(Routers.selectLockTypePage);
                logic.showToast('演示模式'.tr);
              }
            },
          ),
        ],
      ),
      body: EasyRefreshTool(
        onRefresh: () {
          getHttpData(isRefresh: true);
        },
        onLoad: () {
          getHttpData(isRefresh: false);
        },
        child: Column(
          children: <Widget>[
            KeySearchWidget(
              editingController: state.searchController,
              onSubmittedAction: () {
                getHttpData(isRefresh: true);
              },
            ),
            SizedBox(
              height: 20.h,
            ),
            Expanded(child: _buildMainUI()),
            AddBottomWhiteBtn(
              btnName:
                  '添加人脸'.tr,
              onClick: () async {
                await Get.toNamed(Routers.addFaceTypePage, arguments: <String, int>{
                      'lockId': state.lockId.value,
                      'fromType': 1 // 1从添加钥匙列表进入 2从考勤添加员工入口进入
                })!.then((value) {
                  getHttpData(isRefresh: true);
                });
              },
            ),
            SizedBox(height: 64.h)
          ],
        ),
      ),
    );
  }

  Widget _buildMainUI() {
    {
      return Obx(() => state.faceItemListData.value.isNotEmpty
          ? ListView.separated(
              itemCount: state.faceItemListData.value.length,
              itemBuilder: (BuildContext c, int index) {
                final FingerprintItemData getFaceItemData =
                    state.faceItemListData.value[index];
                // 人脸
                if (index < state.faceItemListData.value.length) {
                  return LeftSlideActions(
                    tag: getFaceItemData.faceName!,
                    key: Key(getFaceItemData.faceName!),
                    actionsWidth: 60,
                    actions: <Widget>[
                      _buildDeleteBtn(getFaceItemData),
                    ],
                    decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(1)),
                    ),
                    child: _keyItem(
                        'images/icon_face.png',
                        getFaceItemData.faceName!,
                        logic.getKeyType(getFaceItemData),
                        logic.getKeyDateType(getFaceItemData), () async {
                      await Get.toNamed(Routers.faceDetailPage,
                          arguments: <String, FingerprintItemData>{
                            'faceItemData': getFaceItemData,
                          })!.then((value) => getHttpData(isRefresh: true));
                    }),
                  );
                }
                return const SizedBox.shrink();
              },
              separatorBuilder: (BuildContext context, int index) {
                return const Divider(
                  height: 1,
                  color: AppColors.greyLineColor,
                );
              },
            )
          : NoData(noDataHeight: 1.sh - ScreenUtil().statusBarHeight - 170.h));
    }
  }

  Widget _buildDeleteBtn(FingerprintItemData faceItemData) {
    return GestureDetector(
      onTap: () async {
        final bool isNetWork =
            await LockMainLogic.to()?.judgeTheNetwork() ?? false;
        if (!isNetWork) {
          return;
        }

        // 省略: 弹出是否删除的确认对话框。
        ShowTipView().showIosTipWithContentDialog('确定要删除吗?'.tr, () async {
          state.isDeletAll = false;
          state.deletKeyID = faceItemData.faceId.toString();
          state.deletFaceNo = int.parse(faceItemData.faceNumber!);

          logic.senderAddFace();
        });
        // showIosTipViewDialog(context);
      },
      child: Container(
        width: 60,
        color: const Color(0xFFF20101),
        alignment: Alignment.center,
        child: Text(
          '删除'.tr,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w500,
            color: Colors.white,
            height: 1,
          ),
        ),
      ),
    );
  }

  // void showIosTipViewDialog(BuildContext context) {
  //   showDialog(
  //     context: context,
  //     builder: (BuildContext context) {
  //       return ShowIosTipView(
  //         title: "提示",
  //         tipTitle: "确定要删除吗?",
  //         sureClick: () async {
  //           Get.back();
  //           state.isDeletFaceData = true;
  //           state.isDeletAll = false;
  //           state.deletUserID = (await Storage.getUid())!;
  //           logic.senderAddFace();
  //         },
  //         cancelClick: () {
  //           Get.back();
  //         },
  //       );
  //     },
  //   );
  // }

  Widget _keyItem(String lockTypeIcon, String lockTypeTitle,
      String ifInvalidation, String showTime, Function() action) {
    return GestureDetector(
      onTap: action,
      child: Container(
        height: 90.h,
        // margin: EdgeInsets.only(left: 20.w, right: 20.w, top: 20.w),
        color: Colors.white,
        // decoration: BoxDecoration(
        //   color: Colors.white,
        //   // borderRadius: BorderRadius.circular(10.w),
        // ),
        child: Row(
          children: <Widget>[
            SizedBox(width: 30.w),
            Image.asset(lockTypeIcon, width: 60.w, height: 60.w),
            SizedBox(width: 20.w),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Row(
                    // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      SizedBox(
                        width: 1.sw - 110.w - 100.w,
                        child: Row(
                          children: <Widget>[
                            Flexible(
                              child: Text(lockTypeTitle,
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                      fontSize: 24.sp,
                                      color: AppColors.blackColor)),
                            ),
                          ],
                        ),
                      ),
                      Text(ifInvalidation,
                          style: TextStyle(fontSize: 22.sp, color: Colors.red)),
                      SizedBox(width: 10.w),
                    ],
                  ),
                  SizedBox(height: 5.h),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Flexible(
                        child: Text(showTime,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                fontSize: 18.sp,
                                color: AppColors.placeholderTextColor)),
                      ),
                    ],
                  ),
                  SizedBox(width: 20.h),
                ],
              ),
            ),
            SizedBox(width: 20.h),
          ],
        ),
      ),
    );
  }

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

    /// 路由订阅
    AppRouteObserver().routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    /// 取消路由订阅
    AppRouteObserver().routeObserver.unsubscribe(this);
    super.dispose();
  }

  /// 从上级界面进入 当前界面即将出现
  @override
  void didPush() {
    super.didPush();
    state.ifCurrentScreen.value = true;
  }

  /// 返回上一个界面 当前界面即将消失
  @override
  void didPop() {
    super.didPop();
    logic.cancelBlueConnetctToastTimer();
    if (EasyLoading.isShow) {
      EasyLoading.dismiss(animation: true);
    }
    state.ifCurrentScreen.value = false;
  }

  /// 从下级返回 当前界面即将出现
  @override
  void didPopNext() {
    super.didPopNext();
    state.ifCurrentScreen.value = true;
  }

  /// 进入下级界面 当前界面即将消失
  @override
  void didPushNext() {
    super.didPushNext();
    logic.cancelBlueConnetctToastTimer();
    if (EasyLoading.isShow) {
      EasyLoading.dismiss(animation: true);
    }
    state.ifCurrentScreen.value = false;
  }
}