import 'package:ef/base/widget/flutterflow/FlutterFlowTheme.dart';
import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/common/util/MyUtils.dart';

class LanguagePage extends StatefulWidget {
  @override
  _LanguagePageState createState() => _LanguagePageState();
}

BoxConstraints? bodysize;
List<String> languageList = [
  '简体中文',
  '繁體中文',
  'English',
];
final Map<String, String> languageMap = {
  '简体中文': 'zh_CN',
  '繁體中文': 'zh_TW',
  'English': 'en_US',
};

class _LanguagePageState extends State<LanguagePage> {
  RxBool checkboxValue = false.obs;
  RxString? selectLanguage = ''.obs;
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, cc) {
      bodysize = cc;
      return GestureDetector(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/new_background.png'), // 本地图片
                fit: BoxFit.fill, // 填满整个 Container
              ),
            ),
            child: Scaffold(
                backgroundColor: Colors.transparent,
                appBar: AppBar(
                  backgroundColor: Colors.transparent,
                  iconTheme: const IconThemeData(color: Colors.white),
                  automaticallyImplyLeading: false,
                  titleSpacing: 0,
                  title: SizedBox(
                    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,
                        ),
                      ],
                    ),
                  ),
                  centerTitle: false,
                ),
                body: SafeArea(
                    top: true,
                    child: Padding(
                        padding: EdgeInsets.only(
                            top: 30.rpx, left: 30.rpx, right: 30.rpx),
                        child: Container(
                            decoration: BoxDecoration(
                                color: Color(0XFF003058),
                                borderRadius: BorderRadius.circular(16.rpx)),
                            child: Padding(
                              padding: EdgeInsets.only(
                                  left: 40.rpx,
                                  top: 20.rpx,
                                  bottom: 20.rpx,
                                  right: 30.rpx),
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  ListView.builder(
                                    padding: EdgeInsets.zero,
                                    shrinkWrap: true,
                                    scrollDirection: Axis.vertical,
                                    itemCount: languageList.length,
                                    itemBuilder:
                                        (BuildContext context, int index) {
                                      return _buildItem(
                                          context, index, languageList[index]);
                                    },
                                  ),
                                  Container(height: bodysize!.maxHeight * 0.12)
                                ],
                              ),
                            ))))),
          ));
    });
  }

  Widget _buildItem(BuildContext context, int index, String text) {
    return Container(
      // width: bodysize!.maxWidth * 1,
      height: bodysize!.maxHeight * 0.055,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            text,
            style: TextStyle(color: Colors.white, fontSize: 30.rpx),
          ),
          Theme(
              data: ThemeData(
                checkboxTheme: CheckboxThemeData(
                  visualDensity: VisualDensity.compact,
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(4),
                  ),
                ),
                unselectedWidgetColor: FlutterFlowTheme.of(context).alternate,
              ),
              child: Obx(() {
                return Checkbox(
                  value: selectLanguage!.value == languageMap[text],
                  onChanged: (newValue) async {
                    if (newValue!) {
                      selectLanguage!.value = languageMap[
                          text]!; // Set selectLanguage to the current text value
                    } else {
                      selectLanguage!.value =
                          ''; // Clear selection if unchecked
                    }
                  },
                  shape: CircleBorder(),
                  side: BorderSide(
                    width: 2,
                    color: FlutterFlowTheme.of(context).alternate,
                  ),
                  activeColor: Color(0XFF6BFDAC),
                  checkColor: FlutterFlowTheme.of(context).info,
                );
              })),
        ],
      ),
    );
  }
}