import 'package:flutter/cupertino.dart';
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/lockSet/lockSoundSet/lockSoundSet_state.dart';

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

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

  @override
  State<LockSoundSetPage> createState() => _LockSoundSetPageState();
}

class _LockSoundSetPageState extends State<LockSoundSetPage> with RouteAware {
  final LockSoundSetLogic logic = Get.put(LockSoundSetLogic());
  final LockSoundSetState state = Get.find<LockSoundSetLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
            barTitle: '锁声音'.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: Obx(() => ListView(
          children: <Widget>[
            CommonItem(
                leftTitel: '锁声音'.tr,
                rightTitle: '',
                isHaveLine: false,
                isHaveRightWidget: true,
                rightWidget:
                SizedBox(width: 60.w, height: 50.h, child: _switch())),
            Container(
              height: 10.h,
            ),
            Container(
              padding: EdgeInsets.only(
                  left: 30.w, right: 30.w, top: 20.w, bottom: 20.w),
              // color: Colors.white,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Expanded(
                      child: Text(
                        '功能开启后，你将可以听到智能锁的提示音。包括电量过低，密码错误等提示。'.tr,
                        style: TextStyle(fontSize: 20.sp),
                      )),
                ],
              ),
            ),
            SizedBox(
              height: 10.h,
            ),
            Visibility(
                visible: state.isOpenLockSound.value,
                child: Container(
                  color: Colors.white,
                  child: Column(
                    children: <Widget>[
                      CommonItem(
                          leftTitel: '请选择锁音量'.tr,
                          rightTitle: '',
                          isHaveLine: true),
                      Obx(() => CommonItem(
                          leftTitel: '低'.tr,
                          rightTitle: '',
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              setState(() {
                                state.lockSoundLevel.value = 1;
                              });
                              logic.ifCanNext();
                            },
                            child: Row(
                              children: <Widget>[
                                Image.asset(
                                  state.lockSoundLevel.value == 1 ? 'images/icon_round_select.png' : 'images/icon_round_unSelect.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          ))),
                      Obx(() => CommonItem(
                          leftTitel: '较低'.tr,
                          rightTitle: '',
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              // setState(() {
                                state.lockSoundLevel.value = 2;
                              // });
                              logic.ifCanNext();
                            },
                            child: Row(
                              children: <Widget>[
                                Image.asset(
                                  state.lockSoundLevel.value == 2 ? 'images/icon_round_select.png' : 'images/icon_round_unSelect.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          ))),
                      Obx(() => CommonItem(
                          leftTitel: '中'.tr,
                          rightTitle: '',
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              // setState(() {
                                state.lockSoundLevel.value = 3;
                              // });
                              logic.ifCanNext();
                            },
                            child: Row(
                              children: <Widget>[
                                Image.asset(
                                  state.lockSoundLevel.value == 3 ? 'images/icon_round_select.png' : 'images/icon_round_unSelect.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          ))),
                      Obx(() => CommonItem(
                          leftTitel: '较高'.tr,
                          rightTitle: '',
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              // setState(() {
                              state.lockSoundLevel.value = 4;
                              // });
                              logic.ifCanNext();
                            },
                            child: Row(
                              children: <Widget>[
                                Image.asset(
                                  state.lockSoundLevel.value == 4 ? 'images/icon_round_select.png' : 'images/icon_round_unSelect.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          ))),
                      Obx(() => CommonItem(
                          leftTitel: '高'.tr,
                          rightTitle: '',
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              // setState(() {
                              state.lockSoundLevel.value = 5;
                              // });
                              logic.ifCanNext();
                            },
                            child: Row(
                              children: <Widget>[
                                Image.asset(
                                  state.lockSoundLevel.value == 5 ? 'images/icon_round_select.png' : 'images/icon_round_unSelect.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          ))),
                    ],
                  ),
                )),
            Container(
              margin: EdgeInsets.only(left: 20.w, right: 20.w, top: 30.w),
              child: SubmitBtn(
                  btnName: '保存'.tr,
                  isDisabled: state.canNext.value,
                  onClick: state.canNext.value ? logic.sendLockSound: null),
            ),
          ],
        )));
  }

  CupertinoSwitch _switch() {
    return CupertinoSwitch(
      activeColor: CupertinoColors.activeBlue,
      trackColor: CupertinoColors.systemGrey5,
      thumbColor: CupertinoColors.white,
      value: state.isOpenLockSound.value,
      onChanged: (bool value) {
        setState(() {
          state.isOpenLockSound.value = value;
        });
        logic.ifCanNext();
      },
    );
  }

  @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;
    state.sureBtnState.value = 0;
  }

  /// 从下级返回 当前界面即将出现
  @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;
    state.sureBtnState.value = 0;
  }
}