import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/face/addFace/addFace_logic.dart';
import 'package:star_lock/main/lockDetail/face/addFace/addFace_state.dart';

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

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

  @override
  State<AddFacePage> createState() => _AddFacePageState();
}

class _AddFacePageState extends State<AddFacePage> with RouteAware {
  final AddFaceLogic logic = Get.put(AddFaceLogic());
  final AddFaceState state = Get.find<AddFaceLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: TitleAppBar(
          barTitle: '添加人脸'.tr,
          haveBack: true,
          backgroundColor: AppColors.mainColor),
      body: ListView(
        children: <Widget>[
          SizedBox(
            height: 50.h,
          ),
          Obx(() => Image.asset(
                state.isClickAddFace.value == false
                    ? 'images/main/icon_addFace_step1.png'
                    : 'images/main/icon_addFace_step2.png',
                width: 100.w,
                height: 457.h,
                fit: BoxFit.fitHeight,
              )),
          SizedBox(
            height: 60.h,
          ),
          Container(
            padding: EdgeInsets.only(left: 20.w, right: 20.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Text(
                    '请单人正对门锁,距离一个成年人手臂长度'.tr + '\n' + '(约0.6米)。'.tr + '\n' + '保持脸部无遮挡，露出五官。'.tr,
                    textAlign: TextAlign.left,
                    maxLines: null,
                    style:
                        TextStyle(fontSize: 24.sp, fontWeight: FontWeight.w600),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 120.h,
          ),
          Obx(
            () => state.isClickAddFace.value == false
                ? Container(
                    padding: EdgeInsets.only(left: 20.w, right: 20.w),
                    child: SubmitBtn(
                        btnName: '准备好了，开始添加'.tr,
                        borderRadius: 20.w,
                        onClick: () {
                          state.isClickAddFace.value = true;
                          logic.senderAddFace();
                        }),
                  )
                : Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Text(
                            '正在录入中...'.tr,
                            style: TextStyle(
                                color: AppColors.darkGrayTextColor,
                                fontSize: 22.sp),
                            textAlign: TextAlign.center,
                          ),
                          Visibility(
                            visible: state.maxRegCount.value > 1,
                            child: Text(
                              '${state.regIndex.value}/${state.maxRegCount.value}',
                              style: TextStyle(
                                  color: AppColors.darkGrayTextColor,
                                  fontSize: 22.sp),
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
          )
        ],
      ),
    );
  }

  @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();
    state.ifCurrentScreen.value = false;

    if(state.ifAddState.value){
      logic.senderCancelAddFaceCommand();
    }
  }

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

  /// 进入下级界面 当前界面即将消失
  @override
  void didPushNext() {
    super.didPushNext();
    logic.cancelBlueConnetctToastTimer();

    state.ifCurrentScreen.value = false;
  }
}