import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutterflow_ui/flutterflow_ui.dart';
import 'package:fluwx/fluwx.dart';
import 'package:vbvs_app/common/color/appConstants.dart';
import 'package:vbvs_app/common/color/app_uri_status.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/common/util/MyUtils.dart';
import 'package:vbvs_app/component/tool/CustomCard.dart';
import 'package:vbvs_app/component/tool/TopSlideNotification.dart';
import 'package:vbvs_app/controller/device/device_share_controller.dart';
import 'package:vbvs_app/controller/login/login_controller.dart';
import 'package:vbvs_app/model/api_response.dart';
import 'package:vbvs_app/pages/device_bind/componnet/FancyCircleCheckbox.dart';

class DeviceSharePage extends StatefulWidget {
  var device;
  DeviceSharePage({super.key, required this.device});

  @override
  State<DeviceSharePage> createState() => _DeviceSharePageState();
}

class _DeviceSharePageState extends State<DeviceSharePage> {
  DeviceShareController deviceShareController = Get.find();
  @override
  void initState() {
    deviceShareController.msg = "".obs;
    deviceShareController.code = 0.obs;
    deviceShareController.account = "".obs;
    deviceShareController.type = 1.obs;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var device = widget.device;
    RxBool flag1 = true.obs;
    RxBool flag2 = false.obs;
    return LayoutBuilder(
      builder: (context, bodySize) => GestureDetector(
        // onTap: () => FocusScope.of(context).unfocus(),,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/img/bgNoImg.png'),
              fit: BoxFit.fill,
            ),
          ),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              backgroundColor: themeController.currentColor.sc17,
              automaticallyImplyLeading: false,
              iconTheme: IconThemeData(color: themeController.currentColor.sc3),
              titleSpacing: 0,
              title: Container(
                width: double.infinity,
                height: 180.rpx,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Text(
                      '设备分享'.tr,
                      style: TextStyle(
                        fontFamily: 'Readex Pro',
                        color: themeController.currentColor.sc3,
                        letterSpacing: 0,
                        fontSize: 30.rpx,
                      ),
                    ),
                    Positioned(
                      left: 0,
                      child: returnIconButtom,
                    ),
                  ],
                ),
              ),
              actions: [],
              centerTitle: false,
            ),
            body: SafeArea(
              top: true,
              child: Padding(
                padding: EdgeInsetsDirectional.fromSTEB(47.rpx, 0, 47.rpx, 0),
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Padding(
                        padding:
                            EdgeInsetsDirectional.fromSTEB(0, 28.rpx, 0, 0),
                        child: Container(
                          width: double.infinity,
                          child: Text(
                            '要分享的设备'.tr,
                            style: TextStyle(
                              fontFamily: 'Inter',
                              fontSize: 30.rpx,
                              letterSpacing: 0.0,
                              color: themeController.currentColor.sc3,
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(
                            0, 62.rpx, 0, 62.rpx),
                        child: Container(
                          width: double.infinity,
                          child: Column(
                            mainAxisSize: MainAxisSize.max,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Row(
                                mainAxisSize: MainAxisSize.max,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Obx(() => FancyCircleCheckbox(
                                        borderColor:
                                            themeController.currentColor.sc3,
                                        fillColor:
                                            themeController.currentColor.sc2,
                                        value: flag1.value,
                                        onChanged: (value) {
                                          flag1.value = !flag1.value;
                                          deviceShareController.updateAll();
                                        },
                                      )),
                                  Text(
                                    '主设备'.tr +
                                        "${device['person']?['name'] == null ? '未命名'.tr : device['person']['name']}",
                                    style: TextStyle(
                                      fontFamily: 'Inter',
                                      fontSize: 26.rpx,
                                      letterSpacing: 0.0,
                                      color: themeController.currentColor.sc3,
                                    ),
                                  ),
                                ].divide(SizedBox(width: 20.rpx)),
                              ),
                              Container(
                                  child: Padding(
                                padding: EdgeInsetsDirectional.only(
                                    start: 0.rpx,
                                    top: 0.rpx,
                                    end: 0.rpx,
                                    bottom: 0.rpx),
                                child: Column(
                                  children: [
                                    GestureDetector(
                                      onTap: () {
                                        // 当点击时，将 type 设置为 0（允许控制）
                                        // data['info'][3]['opType'] = 1;
                                        // opType.value = 1;
                                        updateWifiConfigSwitch();
                                        deviceShareController.updateAll();
                                      },
                                      child: Container(
                                        width: MediaQuery.sizeOf(context).width,
                                        constraints: const BoxConstraints(
                                          minHeight: 46,
                                        ),
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(0),
                                        ),
                                        child: Row(
                                          mainAxisSize: MainAxisSize.max,
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(
                                              '允许对方配置wifi'.tr,
                                              style: TextStyle(
                                                fontFamily: 'Readex Pro',
                                                color: const Color(0xFFFFFFFF),
                                                fontSize: 27.rpx,
                                                letterSpacing: 0.0,
                                              ),
                                            ),
                                            Obx(() {
                                              return Container(
                                                height: 33.rpx,
                                                child: AspectRatio(
                                                  aspectRatio: 1,
                                                  child: Center(
                                                    child: Container(
                                                      height: 33.rpx,
                                                      width: 33.rpx,
                                                      decoration: BoxDecoration(
                                                        borderRadius:
                                                            BorderRadius
                                                                .circular(
                                                                    33.rpx / 2),
                                                        border: Border.all(
                                                          width:
                                                              getWifiConfigSwitch()
                                                                  ? 1
                                                                  : 0.5,
                                                          color:
                                                              Color(0xFFC8CBD2),
                                                        ),
                                                      ),
                                                      child:
                                                          getWifiConfigSwitch()
                                                              ? Center(
                                                                  child:
                                                                      ClipOval(
                                                                    child:
                                                                        Container(
                                                                      width:
                                                                          33.rpx *
                                                                              0.6,
                                                                      height:
                                                                          33.rpx *
                                                                              0.6,
                                                                      color: themeController.currentColor.sc2,
                                                                    ),
                                                                  ),
                                                                )
                                                              : null,
                                                    ),
                                                  ),
                                                ),
                                              );
                                            })
                                          ],
                                        ),
                                      ),
                                    ),
                                    // GestureDetector(
                                    //   onTap: () {
                                    //     // 当点击时，将 type 设置为 1（仅允许查看）
                                    //     // data['info'][3]['opType'] = 2;
                                    //     // opType.value = 2;
                                    //   },
                                    //   child: Container(
                                    //     width: MediaQuery.sizeOf(context)
                                    //         .width,
                                    //     constraints: const BoxConstraints(
                                    //       minHeight: 46,
                                    //     ),
                                    //     decoration: BoxDecoration(
                                    //       borderRadius:
                                    //           BorderRadius.circular(0),
                                    //     ),
                                    //     child: Row(
                                    //       mainAxisSize: MainAxisSize.max,
                                    //       mainAxisAlignment:
                                    //           MainAxisAlignment
                                    //               .spaceBetween,
                                    //       children: [
                                    //         Text(
                                    //           '仅允许对方查看该设备'.tr,
                                    //           style: TextStyle(
                                    //             fontFamily: 'Readex Pro',
                                    //             color:
                                    //                 const Color(0xFFFFFFFF),
                                    //             fontSize: 27.rpx,
                                    //             letterSpacing: 0.0,
                                    //           ),
                                    //         ),
                                    //         Obx(() {
                                    //           flag2;
                                    //           return Container(
                                    //             height: 33.rpx,
                                    //             child: AspectRatio(
                                    //               aspectRatio: 1,
                                    //               child: Center(
                                    //                 child: Container(
                                    //                   height: 33.rpx,
                                    //                   width: 33.rpx,
                                    //                   decoration:
                                    //                       BoxDecoration(
                                    //                     borderRadius:
                                    //                         BorderRadius
                                    //                             .circular(
                                    //                                 33.rpx /
                                    //                                     2),
                                    //                     border: Border.all(
                                    //                       width: 2 == 2
                                    //                           ? 1
                                    //                           : 0.5,
                                    //                       color: Color(
                                    //                           0xFFC8CBD2),
                                    //                     ),
                                    //                   ),
                                    //                   child: 2 == 2
                                    //                       ? Center(
                                    //                           child:
                                    //                               ClipOval(
                                    //                             child:
                                    //                                 Container(
                                    //                               width:
                                    //                                   33.rpx *
                                    //                                       0.6,
                                    //                               height:
                                    //                                   33.rpx *
                                    //                                       0.6,
                                    //                               color: const Color(
                                    //                                   0xFF6BFDAC),
                                    //                             ),
                                    //                           ),
                                    //                         )
                                    //                       : null,
                                    //                 ),
                                    //               ),
                                    //             ),
                                    //           );
                                    //         })
                                    //       ],
                                    //     ),
                                    //   ),
                                    // ),
                                  ],
                                ),
                              )),
                            ].divide(SizedBox(height: 64.rpx)),
                          ),
                        ),
                      ),
                      Padding(
                        padding:
                            EdgeInsetsDirectional.fromSTEB(0, 58.rpx, 0, 0),
                        child: Container(
                          width: MediaQuery.sizeOf(context).width * 0.66,
                          height: 100.rpx,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50.rpx),
                            border: Border.all(
                              color: themeController.currentColor.sc4
                                  .withOpacity(0.5),
                              width: AppConstants().border_width,
                            ),
                          ),
                          child: Align(
                            alignment: AlignmentDirectional(0, 0),
                            child: TextFormField(
                              // controller: _model.textController1,
                              // focusNode: _model.textFieldFocusNode1,
                              initialValue: deviceShareController.account.value,
                              onChanged: (Value) {
                                deviceShareController.account.value = Value;
                              },
                              autofocus: false,
                              obscureText: false,
                              decoration: InputDecoration(
                                fillColor: Colors.transparent,
                                isDense: true,
                                labelStyle: TextStyle(
                                  fontFamily: 'Inter',
                                  letterSpacing: 0.0,
                                  color: themeController.currentColor.sc3,
                                ),
                                hintText: '请输入对方手机号或邮箱'.tr,
                                hintStyle: TextStyle(
                                  fontFamily: 'Inter',
                                  fontSize: 26.rpx,
                                  letterSpacing: 0.0,
                                  color: themeController.currentColor.sc4,
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                    color: Color(0x00000000),
                                    width: 1.rpx,
                                  ),
                                  borderRadius: BorderRadius.circular(8.rpx),
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                    color: Color(0x00000000),
                                    width: 1.rpx,
                                  ),
                                  borderRadius: BorderRadius.circular(8.rpx),
                                ),
                                errorBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                    width: 1.rpx,
                                  ),
                                  borderRadius: BorderRadius.circular(8.rpx),
                                ),
                                focusedErrorBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                    width: 1.rpx,
                                  ),
                                  borderRadius: BorderRadius.circular(8.rpx),
                                ),
                                filled: true,
                              ),
                              style: TextStyle(
                                fontFamily: 'Inter',
                                letterSpacing: 0.0,
                                color: themeController.currentColor.sc3,
                              ),
                              textAlign: TextAlign.center,
                              cursorColor: themeController.currentColor.sc3,
                              // validator: _model.textController1Validator
                              //     .asValidator(context),
                            ),
                          ),
                        ),
                      ),
                      Obx(() {
                        return Padding(
                          padding:
                              EdgeInsetsDirectional.fromSTEB(0, 15.rpx, 0, 0),
                          child: Container(
                            width: double.infinity,
                            constraints: BoxConstraints(
                              minHeight: 30.rpx,
                            ),
                            child: deviceShareController.code != 0
                                ? Align(
                                    alignment: AlignmentDirectional(0, 0),
                                    child: RichText(
                                      textAlign: TextAlign.center,
                                      text: TextSpan(
                                        children: [
                                          TextSpan(
                                            text:
                                                '${deviceShareController.code.value == 1 ? "邀请成功".tr : "邀请失败".tr}',
                                            style: TextStyle(
                                              fontFamily: 'Inter',
                                              fontSize: 26.rpx,
                                              letterSpacing: 0.0,
                                              color: deviceShareController
                                                          .code.value ==
                                                      1
                                                  ? themeController
                                                      .currentColor.sc2
                                                  : themeController
                                                      .currentColor.sc9,
                                            ),
                                          ),
                                          TextSpan(
                                            text:
                                                '${deviceShareController.msg}',
                                            style: TextStyle(
                                              fontFamily: 'Inter',
                                              fontSize: 26.rpx,
                                              letterSpacing: 0.0,
                                              color: themeController
                                                  .currentColor.sc9,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  )
                                : Container(),
                          ),
                        );
                      }),
                      Padding(
                        padding:
                            EdgeInsetsDirectional.fromSTEB(0, 58.rpx, 0, 0),
                        child: CustomCard(
                          borderRadius:
                              AppConstants().button_container_radius, // 圆角半径
                          onTap: () async {
                            ApiResponse apiResponse =
                                await deviceShareController
                                    .shareDevice(device['mac']);
                            if (apiResponse.code == HttpStatusCodes.ok) {
                              TopSlideNotification.show(context,
                                  text: apiResponse.msg!);
                            } else {
                              TopSlideNotification.show(context,
                                  text: apiResponse.msg!,
                                  textColor: themeController.currentColor.sc9);
                            }
                          },
                          colors: [
                            // 渐变色
                            themeController.currentColor.sc1,
                            themeController.currentColor.sc2,
                          ],
                          child: Container(
                            width: MediaQuery.sizeOf(context).width * 0.214,
                            height: MediaQuery.sizeOf(context).height * 0.037,
                            constraints: BoxConstraints(
                              minWidth: 160.rpx,
                              minHeight: 60.rpx,
                            ),
                            child: Row(
                              mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  '发送邀请'.tr,
                                  style: TextStyle(
                                    color: themeController.currentColor.sc3,
                                    fontFamily: 'Inter',
                                    fontSize: AppConstants()
                                        .normal_text_fontSize, // 自定义字体大小
                                    letterSpacing: 0.0,
                                  ),
                                ),
                              ].divide(SizedBox(width: 17.rpx)),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  getWifiConfigSwitch() {
    if (deviceShareController.type.value == 1) {
      return true;
    }
    return false;
  }

  void updateWifiConfigSwitch() {
    if (deviceShareController.type.value == 1) {
      deviceShareController.type.value = 2;
    } else if (deviceShareController.type.value == 2) {
      deviceShareController.type.value = 1;
    }
  }
}