import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutterflow_ui/flutterflow_ui.dart';
import 'package:vbvs_app/common/color/appConstants.dart';
import 'package:vbvs_app/common/util/CommonVariables.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/common/util/MyUtils.dart';
import 'package:vbvs_app/component/tool/ClickableContainer.dart';
import 'package:vbvs_app/controller/main_bottom/global_controller.dart';
import 'package:vbvs_app/controller/mh_controller/mhdevice_share_controller.dart';
import 'package:vbvs_app/pages/mh_page/EmptyMessageWidget.dart';
import 'package:vbvs_app/pages/mh_page/ShareUserWidget.dart';

class ShareDeviceWidget extends GetView<MHDeviceShareController> {
  final scaffoldKey = GlobalKey<ScaffoldState>();

  final ScrollController scrollController = ScrollController();

  // ShareDeviceWidget() {
  //   controller.initData();
  //   scrollController.addListener(() {
  //     if (scrollController.position.pixels ==
  //             scrollController.position.maxScrollExtent &&
  //         controller.model.hasMore) {
  //       controller.initData();
  //       controller.updateAll();
  //     }
  //   });
  // }
  final _formKey = GlobalKey<FormState>();
  final _phoneController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    var deviceController = Get.find<GlobalController>();
    controller.model.msg = "";
    controller.model.show = 0;
    controller.model.type = 1;
    return GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/new_background.png'), // 本地图片
              fit: BoxFit.fill, // 填满整个 Container
            ),
          ),
          child: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                automaticallyImplyLeading: false,
                iconTheme: const IconThemeData(color: Colors.white),
                titleSpacing: 0,
                title: Container(
                  width: double.infinity,
                  height: 180.rpx,
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      // 中间居中的标题
                      Text(
                        '分享设备',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 30.rpx,
                        ),
                      ),
                      // 左侧图标
                      Positioned(
                        left: 20.rpx,
                        child: returnIconButtomNew,
                      ),
                    ],
                  ),
                ),
                actions: [],
                centerTitle: false,
              ),
              key: scaffoldKey,
              backgroundColor: Colors.transparent,
              body: SingleChildScrollView(
                child: Container(
                  width: MediaQuery.sizeOf(context).width,
                  height: MediaQuery.sizeOf(context).height * 1,
                  child: Padding(
                    padding:
                        EdgeInsetsDirectional.fromSTEB(30.rpx, 0, 30.rpx, 0),
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Padding(
                          padding:
                              EdgeInsetsDirectional.fromSTEB(0, 30.rpx, 0, 0),
                          child: Container(
                            width: MediaQuery.sizeOf(context).width,
                            decoration: BoxDecoration(
                              color: const Color(0xFF003058),
                              borderRadius: BorderRadius.circular(16.rpx),
                            ),
                            child: Padding(
                              padding: EdgeInsetsDirectional.fromSTEB(
                                  30.rpx, 49.rpx, 30.rpx, 80.rpx),
                              child: Column(
                                mainAxisSize: MainAxisSize.max,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Column(
                                    mainAxisSize: MainAxisSize.max,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      Text(
                                        '将以下设备分享给您的家人或朋友 ',
                                        style: TextStyle(
                                          fontFamily: 'Readex Pro',
                                          color: Colors.white,
                                          fontSize: 30.rpx,
                                          letterSpacing: 0.0,
                                          height: 1,
                                        ),
                                      ),
                                      Text(
                                        '设备ID：${deviceController.model.deviceMain['mac']}',
                                        style: TextStyle(
                                            fontFamily: 'Readex Pro',
                                            color: const Color(0xFF6BFDAC),
                                            fontSize: 26.rpx,
                                            letterSpacing: 0.0,
                                            height: 1),
                                      ),
                                    ].divide(SizedBox(height: 65.rpx)),
                                  ),
                                  Padding(
                                    padding: EdgeInsetsDirectional.fromSTEB(
                                        0, 80.rpx, 0, 0),
                                    child: Container(
                                      width: MediaQuery.sizeOf(context).width,
                                      constraints: const BoxConstraints(
                                        minHeight: 46,
                                      ),
                                      decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular(16.rpx),
                                      ),
                                      child: Align(
                                          alignment:
                                              const AlignmentDirectional(0, 0),
                                          child: Form(
                                            key: _formKey,
                                            child: TextFormField(
                                              controller: _phoneController,
                                              decoration: InputDecoration(
                                                hintText: '请输入对方手机号',
                                                hintStyle: TextStyle(
                                                  fontFamily: 'Readex Pro',
                                                  color:
                                                      const Color(0xFF929699),
                                                  fontSize: 36.rpx,
                                                ),
                                                enabledBorder:
                                                    const UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: Color(0xFF929699),
                                                      width: 0),
                                                ),
                                                focusedBorder:
                                                    const UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: Color(0xFF929699),
                                                      width: 0),
                                                ),
                                                errorBorder:
                                                    const UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: Colors.red,
                                                      width: 0),
                                                ),
                                                focusedErrorBorder:
                                                    const UnderlineInputBorder(
                                                  borderSide: BorderSide(
                                                      color: Colors.redAccent,
                                                      width: 0),
                                                ),
                                                contentPadding:
                                                    const EdgeInsets.only(
                                                        left: 10, bottom: 5),
                                              ),
                                              style: TextStyle(
                                                fontFamily: 'Readex Pro',
                                                color: Colors.white,
                                                fontSize: 36.rpx,
                                              ),
                                              validator: (value) {
                                                if (value == null ||
                                                    value.isEmpty) {
                                                  return '手机号不能为空';
                                                }
                                                final phoneReg =
                                                    RegExp(r'^1[3-9]\d{9}$');
                                                if (!phoneReg.hasMatch(value)) {
                                                  return '请输入正确的手机号';
                                                }
                                                return null;
                                              },
                                              onChanged: (value) {
                                                controller.model.phone = value;
                                              },
                                            ),
                                          )
                                          // TextFormField(
                                          //   // controller: _model.textController,
                                          //   // focusNode: _model.textFieldFocusNode,
                                          //   // autofocus: true,
                                          //   obscureText: false,
                                          //   decoration: InputDecoration(
                                          //     hintText: '请输入对方手机号',
                                          //     hintStyle: FlutterFlowTheme.of(
                                          //             context)
                                          //         .labelMedium
                                          //         .override(
                                          //           fontFamily: 'Readex Pro',
                                          //           color:
                                          //               const Color(0xFFD2D2D2),
                                          //           fontSize: 13,
                                          //           letterSpacing: 0.0,
                                          //         ),
                                          //     enabledBorder:
                                          //         const UnderlineInputBorder(
                                          //       borderSide: BorderSide(
                                          //           color: Color(0xFFCCCCCC),
                                          //           width: 1),
                                          //     ),
                                          //     focusedBorder:
                                          //         const UnderlineInputBorder(
                                          //       borderSide: BorderSide(
                                          //           color: Color(0xFF929699),
                                          //           width: 0),
                                          //     ),
                                          //     errorBorder:
                                          //         const UnderlineInputBorder(
                                          //       borderSide: BorderSide(
                                          //           color: Colors.red, width: 1),
                                          //     ),
                                          //     focusedErrorBorder:
                                          //         const UnderlineInputBorder(
                                          //       borderSide: BorderSide(
                                          //           color: Colors.redAccent,
                                          //           width: 1.5),
                                          //     ),
                                          //     contentPadding:
                                          //         const EdgeInsets.only(
                                          //             left: 10, bottom: 5),
                                          //   ),
                                          //   style: FlutterFlowTheme.of(context)
                                          //       .bodyMedium
                                          //       .override(
                                          //         fontFamily: 'Readex Pro',
                                          //         fontSize: 13,
                                          //         letterSpacing: 0.0,
                                          //       ),
                                          //   onChanged: (value) {
                                          //     controller.model.phone = value;
                                          //   },
                                          //   // validator: _model.textControllerValidator
                                          //   //     .asValidator(context),
                                          // ),

                                          ),
                                    ),
                                  ),
                                  ClickableContainer(
                                      backgroundColor: Colors.transparent,
                                      highlightColor: Colors.transparent,
                                      padding: EdgeInsets.only(top: 30.rpx),
                                      onTap: () {},
                                      child: Container(
                                        decoration: const BoxDecoration(
                                          border: Border(
                                            bottom: BorderSide(
                                                color: Color(0xFF85F5FF),
                                                width: 0), // 下边线
                                          ),
                                        ),
                                        child: Text(
                                          '点击复制APP下载链接',
                                          style: TextStyle(
                                            color: Color(0xFF85F5FF), // 蓝色文字

                                            fontSize: 22.rpx,
                                          ),
                                        ),
                                      )),
                                  // Container(
                                  //   width: MediaQuery.sizeOf(context).width,
                                  //   constraints: const BoxConstraints(
                                  //     minHeight: 46,
                                  //   ),
                                  //   decoration: BoxDecoration(
                                  //     borderRadius: BorderRadius.circular(0),
                                  //   ),
                                  //   child: Align(
                                  //       alignment:
                                  //           const AlignmentDirectional(0, 0),
                                  //       child: Obx(() {
                                  //         if (controller.model.show == 0) {
                                  //           return Container();
                                  //         } else {
                                  //           return GestureDetector(
                                  //             onTap: controller
                                  //                     .model.msg!.isNotEmpty
                                  //                 ? () {
                                  //                     Clipboard.setData(
                                  //                         ClipboardData(
                                  //                             text: CommonVariables
                                  //                                 .shareText));
                                  //                     showToast(
                                  //                         "复制成功，粘贴分享APP下载链接！",
                                  //                         color: color_success);
                                  //                   }
                                  //                 : null, // 不可点击时设置为 null
                                  //             child: RichText(
                                  //               textAlign: TextAlign
                                  //                   .center, // 设置整个 RichText 内容居中
                                  //               text: TextSpan(
                                  //                 children:
                                  //                     controller.model.msg!
                                  //                             .isNotEmpty
                                  //                         ? [
                                  //                             TextSpan(
                                  //                               text: controller
                                  //                                       .model
                                  //                                       .msg! +
                                  //                                   "!", // 第一部分文本
                                  //                               style: FlutterFlowTheme.of(
                                  //                                       context)
                                  //                                   .bodyMedium
                                  //                                   .override(
                                  //                                     fontFamily:
                                  //                                         'Readex Pro',
                                  //                                     color: const Color(
                                  //                                         0xFFE55E92), // 设置为粉红色
                                  //                                     fontSize:
                                  //                                         26.rpx,
                                  //                                     letterSpacing:
                                  //                                         0.0,
                                  //                                   ),
                                  //                             ),
                                  //                             const TextSpan(
                                  //                               text:
                                  //                                   '\n', // 添加换行
                                  //                             ),
                                  //                             WidgetSpan(
                                  //                               child: SizedBox(
                                  //                                   height: 20
                                  //                                       .rpx), // 添加间距
                                  //                             ),
                                  //                             TextSpan(
                                  //                               text:
                                  //                                   '点击复制APP下载链接', // 第二部分文本
                                  //                               style: FlutterFlowTheme.of(
                                  //                                       context)
                                  //                                   .bodyMedium
                                  //                                   .override(
                                  //                                     fontFamily:
                                  //                                         'Readex Pro',
                                  //                                     color: const Color(
                                  //                                         0xFF1890FF), // 设置为蓝色
                                  //                                     fontSize:
                                  //                                         20.rpx,
                                  //                                     letterSpacing:
                                  //                                         0.0,
                                  //                                     decoration:
                                  //                                         TextDecoration
                                  //                                             .underline, // 添加下划线
                                  //                                   ),
                                  //                             ),
                                  //                           ]
                                  //                         : [
                                  //                             TextSpan(
                                  //                               text:
                                  //                                   '发送成功！', // 当 msg 为空时显示的文本
                                  //                               style: FlutterFlowTheme.of(
                                  //                                       context)
                                  //                                   .bodyMedium
                                  //                                   .override(
                                  //                                     fontFamily:
                                  //                                         'Readex Pro',
                                  //                                     color: const Color(
                                  //                                         0xFF07C160), // 设置为绿色
                                  //                                     fontSize:
                                  //                                         20.rpx,
                                  //                                     letterSpacing:
                                  //                                         0.0,
                                  //                                   ),
                                  //                             ),
                                  //                           ],
                                  //               ),
                                  //             ),
                                  //           );
                                  //         }
                                  //       })),
                                  // ),

                                  Obx(
                                    () => GestureDetector(
                                      onTap: () {
                                        // 当点击时，将 type 设置为 0（允许控制）
                                        controller.model.type = 1;
                                        controller.updateAll();
                                      },
                                      child: Container(
                                        margin: EdgeInsets.only(top: 76.rpx),
                                        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(
                                              '允许对方控制该设备',
                                              style: TextStyle(
                                                fontFamily: 'Readex Pro',
                                                color: Colors.white,
                                                fontSize: 26.rpx,
                                                letterSpacing: 0.0,
                                              ),
                                            ),
                                            Theme(
                                                data:
                                                    Theme.of(context).copyWith(
                                                  unselectedWidgetColor: Color(
                                                      0xFFC8CBD2), // 改变未选中状态边框颜色
                                                ),
                                                child: Radio<int>(
                                                  value: 1,
                                                  groupValue:
                                                      controller.model.type,
                                                  onChanged: (value) {
                                                    controller.model.type =
                                                        value!;
                                                    controller.updateAll();
                                                  },
                                                  activeColor:
                                                      const Color(0xFF6BFDAC),
                                                  materialTapTargetSize:
                                                      MaterialTapTargetSize
                                                          .shrinkWrap, // 减少内边距
                                                  visualDensity: VisualDensity(
                                                      horizontal: -4,
                                                      vertical: -4), // 缩小视觉密度
                                                ))
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                  Obx(
                                    () => GestureDetector(
                                      onTap: () {
                                        // 当点击时，将 type 设置为 1（仅允许查看）
                                        controller.model.type = 2;
                                        controller.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(
                                              '仅允许对方查看该设备',
                                              style: TextStyle(
                                                fontFamily: 'Readex Pro',
                                                color: Colors.white,
                                                fontSize: 26.rpx,
                                                letterSpacing: 0.0,
                                              ),
                                            ),
                                            Theme(
                                                data:
                                                    Theme.of(context).copyWith(
                                                  unselectedWidgetColor: Color(
                                                      0xFFC8CBD2), // 改变未选中状态边框颜色
                                                ),
                                                child: Radio<int>(
                                                  value: 2,
                                                  groupValue:
                                                      controller.model.type,
                                                  onChanged: (value) {
                                                    controller.model.type =
                                                        value!;
                                                    controller.updateAll();
                                                  },
                                                  activeColor:
                                                      const Color(0xFF6BFDAC),
                                                  materialTapTargetSize:
                                                      MaterialTapTargetSize
                                                          .shrinkWrap, // 减少内边距
                                                  visualDensity: VisualDensity(
                                                      horizontal: -4,
                                                      vertical: -4), // 缩小视觉密度
                                                ))
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                  Align(
                                    alignment: const AlignmentDirectional(0, 0),
                                    child: Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          0, 46.rpx, 0, 0),
                                      child: Container(
                                        width: 108,
                                        height: 31,
                                        decoration: BoxDecoration(),
                                        child: FFButtonWidget(
                                          onPressed: () async {
                                            //todo 1:验证用户是否存在 2：发送邀请
                                            // controller.model.show = 1;
                                            // String msg =
                                            //     await controller.sendInvite(
                                            //         controller.model.phone,
                                            //         deviceController
                                            //             .model.deviceMain['mac']);
                                            // if (msg != null && msg.isNotEmpty) {
                                            //   controller.model.msg = msg;
                                            // }
                                            // controller.updateAll();
                                          },
                                          text: '发送邀请',
                                          options: FFButtonOptions(
                                            height: 60.rpx,
                                            padding:
                                                EdgeInsetsDirectional.fromSTEB(
                                                    30.rpx, 0, 30.rpx, 0),
                                            color: const Color(0xFF84F5FF),
                                            textStyle: TextStyle(
                                              fontFamily: 'Readex Pro',
                                              color: Color(0xFF011D33),
                                              fontSize: 26.rpx,
                                              letterSpacing: 0.0,
                                            ),
                                            elevation: 0,
                                            borderRadius:
                                                BorderRadius.circular(50),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsetsDirectional.fromSTEB(
                                0, 100.rpx, 0, 32.rpx),
                            child: Container(
                              width: MediaQuery.sizeOf(context).width,
                              child: SingleChildScrollView(
                                child: Column(
                                  mainAxisSize: MainAxisSize.max,
                                  children: [
                                    Align(
                                      alignment:
                                          const AlignmentDirectional(-1, 0),
                                      child: Padding(
                                        padding: const EdgeInsetsDirectional
                                            .fromSTEB(14, 0, 0, 16),
                                        child: Text(
                                          '已分享用户',
                                          style: TextStyle(
                                              fontFamily: 'Readex Pro',
                                              color: Colors.white,
                                              fontSize: 30.rpx,
                                              letterSpacing: 0.0,
                                              height: 1),
                                        ),
                                      ),
                                    ),
                                    Obx(
                                      () {
                                        // 检查 shareUser 是否为空或数量为 0
                                        if (controller.model.shareUser ==
                                                null ||
                                            controller
                                                .model.shareUser!.isEmpty) {
                                          // return Container(
                                          //   alignment: AlignmentDirectional
                                          //       .centerStart, // 确保文字靠左对齐
                                          //   padding: EdgeInsets.symmetric(
                                          //       horizontal: 16.0), // 根据需要设置内边距
                                          //   child: Text(
                                          //     "暂无分享！",
                                          //     textAlign: TextAlign.left, // 文字左对齐
                                          //     style: FlutterFlowTheme.of(context)
                                          //         .bodyMedium, // 可根据需要自定义样式
                                          //   ),
                                          // );
                                          return EmptyMessageWidget(
                                            imagePath:
                                                "assets/images/emptyUser.png",
                                          );
                                        }

                                        // 否则显示正常的 ListView
                                        return ListView(
                                          controller:
                                              scrollController, // 绑定 ScrollController
                                          shrinkWrap: true,
                                          scrollDirection: Axis.vertical,
                                          children: (controller.model.shareUser!
                                                  .asMap()
                                                  .entries
                                                  .map((e) => ShareUserWidget(
                                                      index: e.key,
                                                      repairListController:
                                                          controller))
                                                  .toList() as List<Widget>)
                                              // .divide(const SizedBox(
                                              //   height: 13,
                                              // ))
                                              .addToEnd(const SizedBox(
                                            height:
                                                AppConstants.list_end_height,
                                          )),
                                        );
                                      },
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              )),
        ));
  }
}
