import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../app_settings/app_colors.dart';
import '../../../../tools/commonItem.dart';
import '../../../../tools/submitBtn.dart';
import '../../../../tools/titleAppBar.dart';
import '../../../../translations/trans_lib.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> {
  final logic = Get.put(LockSoundSetLogic());
  final state = Get.find<LockSoundSetLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
            barTitle: TranslationLoader.lanKeys!.lockSound!.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: Obx(() => ListView(
          children: [
            CommonItem(
                leftTitel: TranslationLoader.lanKeys!.lockSound!.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: [
                  Expanded(
                      child: Text(
                        TranslationLoader.lanKeys!.lockSoundTip!.tr,
                        style: TextStyle(fontSize: 20.sp),
                      )),
                ],
              ),
            ),
            SizedBox(
              height: 10.h,
            ),
            Visibility(
                visible: state.isOpenLockSound.value,
                child: Container(
                  color: Colors.white,
                  child: Column(
                    children: [
                      CommonItem(
                          leftTitel: TranslationLoader
                              .lanKeys!.pleaseSeletLockVolume!.tr,
                          rightTitle: "",
                          isHaveLine: true),
                      CommonItem(
                          leftTitel: TranslationLoader.lanKeys!.low!.tr,
                          rightTitle: "",
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              setState(() {
                                state.lockSoundLevel.value = 1;
                              });
                            },
                            child: Row(
                              children: [
                                Image.asset(
                                  state.lockSoundLevel.value == 1 ? 'images/icon_round_selet.png' : 'images/icon_round_unSelet.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          )),
                      CommonItem(
                          leftTitel: TranslationLoader.lanKeys!.lower!.tr,
                          rightTitle: "",
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              setState(() {
                                state.lockSoundLevel.value = 2;
                              });
                            },
                            child: Row(
                              children: [
                                Image.asset(
                                  state.lockSoundLevel.value == 2 ? 'images/icon_round_selet.png' : 'images/icon_round_unSelet.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          )),
                      CommonItem(
                          leftTitel: TranslationLoader.lanKeys!.medium!.tr,
                          rightTitle: "",
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              setState(() {
                                state.lockSoundLevel.value = 3;
                              });
                            },
                            child: Row(
                              children: [
                                Image.asset(
                                  state.lockSoundLevel.value == 3 ? 'images/icon_round_selet.png' : 'images/icon_round_unSelet.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          )),
                      CommonItem(
                          leftTitel: TranslationLoader.lanKeys!.higher!.tr,
                          rightTitle: "",
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              setState(() {
                                state.lockSoundLevel.value = 4;
                              });
                            },
                            child: Row(
                              children: [
                                Image.asset(
                                  state.lockSoundLevel.value == 4 ? 'images/icon_round_selet.png' : 'images/icon_round_unSelet.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          )),
                      CommonItem(
                          leftTitel: TranslationLoader.lanKeys!.high!.tr,
                          rightTitle: "",
                          isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: GestureDetector(
                            onTap: () {
                              setState(() {
                                state.lockSoundLevel.value = 5;
                              });
                            },
                            child: Row(
                              children: [
                                Image.asset(
                                  state.lockSoundLevel.value == 5 ? 'images/icon_round_selet.png' : 'images/icon_round_unSelet.png',
                                  width: 30.w,
                                  height: 30.w,
                                ),
                              ],
                            ),
                          )),
                    ],
                  ),
                )),
            Container(
              margin: EdgeInsets.only(left: 20.w, right: 20.w, top: 30.w),
              child: SubmitBtn(
                  btnName: TranslationLoader.lanKeys!.save!.tr,
                  onClick: () {
                    logic.sendLockSound();
                  }),
            ),
          ],
        )));
  }

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