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 'gatewayConfigurationWifi_logic.dart';
import 'gatewayConfigurationWifi_state.dart';

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

  @override
  State<GatewayConfigurationWifiPage> createState() =>
      _GatewayConfigurationWifiPageState();
}

class _GatewayConfigurationWifiPageState extends State<GatewayConfigurationWifiPage> {
  final GatewayConfigurationWifiLogic logic = Get.put(GatewayConfigurationWifiLogic());
  final GatewayConfigurationWifiState state = Get.find<GatewayConfigurationWifiLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.mainBackgroundColor,
      appBar: TitleAppBar(
          barTitle: '配置网络'.tr,
          haveBack: true,
          backgroundColor: AppColors.mainColor),
      body: Column(
        children: <Widget>[
          // Container(
          //     width: 1.sw,
          //     color: const Color(0xFFF2F6F9),
          //     padding: EdgeInsets.all(15.h),
          //     child: Text(
          //       '不支持5G WiFi网络，请选择2.4G WiFi网络进行配置'.tr,
          //       style: TextStyle(
          //           color: AppColors.darkGrayTextColor, fontSize: 20.sp),
          //     )),
          Expanded(
            child: ListView(
              children: <Widget>[
                CommonItem(
                    leftTitel: 'WiFi名称'.tr,
                    rightTitle: 'XinHongJia',
                    allHeight: 100.h,
                    isHaveLine: true,
                    isHaveDirection: true,
                    action: () {
                      // Navigator.pushNamed(context, Routers.minePersonInfoSetSafetyProblemPage);
                    }),
                CommonItem(
                    leftTitel: 'WiFi密码'.tr,
                    rightTitle: '',
                    isHaveRightWidget: true,
                    rightWidget: getTFWidget(
                        state.wifiPasswardTF,
                        '请输入WiFi密码'.tr)),
                SizedBox(
                  height: 10.h,
                ),
                CommonItem(
                    leftTitel: '网关名称'.tr,
                    rightTitle: '',
                    isHaveRightWidget: true,
                    rightWidget: getTFWidget(state.gatewayNamePasswardTF,
                        '请输入网关名称'.tr)),
                SizedBox(
                  height: 10.h,
                ),
                CommonItem(
                    leftTitel: '网络MAC'.tr,
                    rightTitle: '48:55:19:7d:84:7a',
                    // allHeight: 100.h,
                    isHaveLine: false),
                SizedBox(
                  height: 10.h,
                ),
                Obx(() => Visibility(
                    visible: state.isUseStaticIP.value,
                    child: Column(
                      children: <Widget>[
                        CommonItem(
                            leftTitel: 'IP地址'.tr,
                            // rightTitle: '192.168.1.1',
                            isHaveLine: true,
                            isHaveRightWidget: true,
                            rightWidget: getTFWidget(state.ipAddressTF, '请输入IP地址')
                        ),
                        CommonItem(
                            leftTitel: '子网掩码'.tr,
                            // rightTitle: '255.255.255.0',
                            isHaveLine: true,
                            isHaveRightWidget: true,
                            rightWidget: getTFWidget(state.subnetMaskTF, '请输入子网掩码')),
                        CommonItem(
                            leftTitel: '默认网关'.tr,
                            // rightTitle: '192.168.1.1',
                            isHaveLine: true,
                          isHaveRightWidget: true,
                          rightWidget: getTFWidget(state.defaultGatewayTF, '请输入默认网关')
                        ),
                        SizedBox(height: 10.h,),
                        Obx(() => CommonItem(
                            leftTitel: '自动获取DNS服务器地址'.tr,
                            rightTitle: '',
                            isHaveLine: true,
                            isHaveRightWidget: true,
                            rightWidget: SizedBox(
                                width: 60.w, height: 50.h, child: _switch()))),
                        Visibility(
                            visible: !state.isAutomaticallyGetDNSServerAddress.value,
                            child: Column(
                              children: <Widget>[
                                CommonItem(
                                    leftTitel: '首选DNS'.tr,
                                    rightTitle: '',
                                    isHaveLine: true,
                                    isHaveRightWidget: true,
                                    rightWidget: getTFWidget(
                                      state.firstChoiceDNSTF,
                                      '请输入'.tr)),
                                CommonItem(
                                    leftTitel: '备选DNS'.tr,
                                    rightTitle: '',
                                    isHaveLine: false,
                                    isHaveRightWidget: true,
                                    rightWidget: getTFWidget(
                                      state.alternativeDNSTF,
                                      '请输入'.tr,)),
                              ],
                            )),
                      ],
                    ))),
                SizedBox(height: 50.h),
                Container(
                  margin: EdgeInsets.only(left: 20.w, right: 20.w),
                  child: SubmitBtn(
                      btnName: '确定'.tr,
                      borderRadius: 20.w,
                      margin: EdgeInsets.only(
                          left: 30.w, right: 30.w, top: 20.w, bottom: 20.w),
                      padding: EdgeInsets.only(top: 15.w, bottom: 15.w),
                      onClick: () {
                        // Navigator.pushNamed(context, Routers.selectGatewayPage);
                      }),
                ),
                SizedBox(height: 10.h),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Obx(() => GestureDetector(
                      child: SizedBox(
                        // width: 150.w,
                        height: 50.h,
                        // color: Colors.red,
                        child: Center(
                          child: Text(
                              state.isUseStaticIP.value
                                  ? '不使用静态IP'.tr
                                  : '使用静态IP'.tr,
                              style: TextStyle(
                                  fontSize: 22.sp, color: AppColors.mainColor)),
                        ),
                      ),
                      onTap: () {
                        state.isUseStaticIP.value = !state.isUseStaticIP.value;

                      },
                    )),
                    SizedBox(width: 30.w),
                  ],
                ),
                SizedBox(
                  height: 50.h,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  // 接受者信息输入框
  Widget getTFWidget(TextEditingController controller, String tfStr) {
    return SizedBox(
      height: 50.h,
      width: 300.w,
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              //输入框一行
              maxLines: 1,
              controller: controller,
              autofocus: false,
              textAlign: TextAlign.end,
              decoration: InputDecoration(
                //输入里面输入文字内边距设置
                hintText: tfStr,
                hintStyle: TextStyle(fontSize: 22.sp),
                focusedBorder: const OutlineInputBorder(
                    borderSide:
                    BorderSide(width: 0, color: Colors.transparent)),
                disabledBorder: const OutlineInputBorder(
                    borderSide:
                    BorderSide(width: 0, color: Colors.transparent)),
                enabledBorder: const OutlineInputBorder(
                    borderSide:
                    BorderSide(width: 0, color: Colors.transparent)),
                border: const OutlineInputBorder(
                    borderSide:
                    BorderSide(width: 0, color: Colors.transparent)),
                contentPadding: const EdgeInsets.symmetric(vertical: 0),
              ),
            ),
          ),
          SizedBox(
            width: 10.w,
          ),
        ],
      ),
    );
  }

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