import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutterflow_ui/flutterflow_ui.dart';
import 'package:vbvs_app/common/color/appConstants.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/component/tool/CustomCard.dart';
import 'package:vbvs_app/controller/setting/language/language_controller.dart';
import 'package:vbvs_app/language/AppLanguage.dart';
import 'package:vbvs_app/pages/device_bind/componnet/FancyCircleCheckbox.dart';

class LanguageSetting extends StatefulWidget {
  const LanguageSetting({super.key});

  @override
  State<LanguageSetting> createState() => _LanguageSettingState();
}

class _LanguageSettingState extends State<LanguageSetting> {
  LanguageController languageController = Get.find();
  @override
  void initState() {
    // languageController.initLanuageList();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    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, // 填满整个 Container
            ),
          ),
          child: Scaffold(
            backgroundColor: Colors.transparent, // 加上这一行
            appBar: AppBar(
              backgroundColor: themeController.currentColor.sc17,
              automaticallyImplyLeading: false,
              iconTheme: IconThemeData(
                color: themeController.currentColor.sc3,
              ),
              titleSpacing: 0,
              // leading: returnIconButtom,
              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(30.rpx, 0, 30.rpx, 0),
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Padding(
                        padding: EdgeInsetsDirectional.fromSTEB(
                            0.rpx, 25.rpx, 0.rpx, 0),
                        child: Container(
                          width: double.infinity,
                          decoration: BoxDecoration(
                            color: Color(0xFF242835),
                            borderRadius: BorderRadius.circular(
                                AppConstants().normal_container_radius),
                          ),
                          child: Padding(
                            padding: EdgeInsetsDirectional.fromSTEB(
                                0.rpx, 0, 0.rpx, 0),
                            child: Column(
                              mainAxisSize: MainAxisSize.max,
                              children: [
                                Padding(
                                  padding: EdgeInsetsDirectional.fromSTEB(
                                      40.rpx, 20.rpx, 40.rpx, 20.rpx),
                                  child: Obx(() {
                                    return Column(
                                      children: languageController.languageList
                                          .map<Widget>((language) {
                                            return ClickableContainer(
                                              backgroundColor:
                                                  Colors.transparent, // 背景透明
                                              highlightColor: themeController
                                                  .currentColor.sc21, // 点击时的背景色
                                              padding: EdgeInsets.symmetric(
                                                  vertical: 10.rpx,
                                                  horizontal: 16.rpx),
                                              onTap: () async {
                                                // 点击事件逻辑
                                                for (var lang
                                                    in languageController
                                                        .languageList) {
                                                  lang.selected = (lang ==
                                                      language); // 根据选择更新状态
                                                }
                                                languageController
                                                    .selectLanguage
                                                    .value = language;
                                                await AppLanguage()
                                                    .loadLanguage(language
                                                        .language_code); // 加载语言
                                                languageController
                                                    .updateAll(); // 更新操作
                                                try {
                                                  await ef.kvdb.write(
                                                      "th/language",
                                                      language.language_code);
                                                } catch (e) {
                                                  print(e);
                                                }
                                              },
                                              child: Row(
                                                mainAxisSize: MainAxisSize.max,
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: [
                                                  Expanded(
                                                    child: Text(
                                                      language.language_name ??
                                                          '语言名称', // 显示语言名称
                                                      style: TextStyle(
                                                        fontFamily: 'Inter',
                                                        color: themeController
                                                            .currentColor.sc3,
                                                        fontSize: AppConstants()
                                                            .title_text_fontSize,
                                                        letterSpacing: 0.0,
                                                      ),
                                                      maxLines: 1,
                                                      overflow: TextOverflow
                                                          .ellipsis, // 省略号处理
                                                    ),
                                                  ),
                                                  FancyCircleCheckbox(
                                                    borderColor: themeController
                                                        .currentColor.sc3,
                                                    fillColor: themeController
                                                        .currentColor.sc2,
                                                    value: language.selected ??
                                                        false, // 根据 selected 状态显示选中或未选中
                                                    onChanged: (value) async {
                                                      // 保持原有的状态更改逻辑
                                                      for (var lang
                                                          in languageController
                                                              .languageList) {
                                                        lang.selected = (lang ==
                                                            language); // 更新选中状态
                                                      }
                                                      languageController
                                                          .selectLanguage
                                                          .value = language;
                                                      await AppLanguage()
                                                          .loadLanguage(language
                                                              .language_code); // 加载语言
                                                      languageController
                                                          .updateAll(); // 更新操作
                                                    },
                                                  ),
                                                ].divide(SizedBox(
                                                    width: 28.rpx)), // 为每个项添加间隔
                                              ),
                                            );
                                          })
                                          .toList()
                                          .divide(SizedBox(
                                            height: 30.rpx,
                                          )),
                                    );
                                  }),
                                ),
                                // ClickableContainer(
                                //   backgroundColor: Colors.transparent, // 容器背景色
                                //   highlightColor: themeController
                                //       .currentColor.sc21, // 点击时的背景色
                                //   padding: EdgeInsetsDirectional.fromSTEB(
                                //       40.rpx, 0.rpx, 40.rpx, 0.rpx),
                                //   onTap: () {},
                                //   child: Container(),
                                // ),
                              ]
                                  .divide(SizedBox(height: 0.rpx))
                                  .addToStart(SizedBox(height: 30.rpx))
                                  .addToEnd(SizedBox(height: 30.rpx)),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildDeviceCard(BuildContext context,
      {required String title, required String imageUrl, required String type}) {
    return CustomCard(
      borderRadius: 20.rpx, // 圆角大小
      onTap: () {
        if (type != null) {
          if (type == '1') {
            Get.toNamed("/blueteethDevice");
          }
        }
      },

      colors: [themeController.currentColor.sc17], // 背景色
      child: Container(
        width: double.infinity,
        height: MediaQuery.sizeOf(context).height * 0.135,
        constraints: BoxConstraints(
          minHeight: 220.rpx,
        ),
        padding: EdgeInsetsDirectional.fromSTEB(77.rpx, 0, 21.rpx, 0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              style: TextStyle(
                fontFamily: 'Inter',
                color: const Color(0xFFC2CED7),
                fontSize: 30.rpx,
                letterSpacing: 0.0,
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.rpx),
              child: Image.asset(
                imageUrl,
                width: 212.rpx,
                height: 168.rpx,
              ),
            ),
          ],
        ),
      ),
    );
  }
}