import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/palm/addPalm/addPalm_logic.dart';
import 'package:star_lock/main/lockDetail/palm/addPalm/addPalm_state.dart';

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

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

  @override
  State<AddPalmPage> createState() => _AddPalmPageState();
}

class _AddPalmPageState extends State<AddPalmPage> with RouteAware{
  final AddPalmLogic logic = Get.put(AddPalmLogic());
  final AddPalmState state = Get.find<AddPalmLogic>().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.isClickAddPalm.value == false
                    ? 'images/main/icon_addPalm_step1.png'
                    : 'images/main/icon_addPalm_step1.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,
          //           textAlign: TextAlign.left,
          //           maxLines: null,
          //           style:
          //               TextStyle(fontSize: 24.sp, fontWeight: FontWeight.w600),
          //         ),
          //       ),
          //     ],
          //   ),
          // ),
          SizedBox(
            height: 120.h,
          ),
          Obx(() =>
          // state.isClickAddPalm.value == false
          //       ? GestureDetector(
          //         onTap: () {
          //             logic.senderAddPalm();
          //           },
          //         child: Container(
          //                 width: 1.sw,
          //                 padding: EdgeInsets.all(10.w),
          //                 margin: EdgeInsets.only(left: 15.w, right: 15.w, top: 10.h, bottom: 10.h),
          //                 decoration: BoxDecoration(
          //                   color: AppColors.mainColor,
          //                   borderRadius: BorderRadius.circular(10.w),
          //                 ),
          //                 child: Center(child: Text('准备好了，开始添加', style: TextStyle(color: Colors.white, fontSize: 24.sp)))),
          //           )
          //         :
                Container(
                      width: 1.sw,
                      padding: EdgeInsets.all(10.w),
                      margin: EdgeInsets.only(left: 15.w, right: 15.w, top: 10.h, bottom: 10.h),
                      decoration: BoxDecoration(
                        color: AppColors.mainColor,
                        borderRadius: BorderRadius.circular(10.w),
                      ),
                      child: Center(
                          child: Text(
                              state.ifConnectScuess.value
                                  ? '已连接到锁,请自然张开手掌，掌心正对摄像头'.tr
                                  : '尝试连接设备...'.tr,
                              style: TextStyle(color: Colors.white, fontSize: 24.sp))),
                    )
          )
        ],
      ),
    );
  }

  @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.senderCancelAddPalmCommand();
    }
  }

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

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

    state.ifCurrentScreen.value = false;
  }
}