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/controller/theme_controller/ThemeController.dart';
import 'package:vbvs_app/model/CustomThemeColor.dart';
import 'package:vbvs_app/pages/device_bind/componnet/FancyCircleCheckbox.dart';

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

  @override
  State<ThemeSetting> createState() => _ThemeSettingState();
}

class _ThemeSettingState extends State<ThemeSetting> {
  ThemeController themeController = Get.find();

  @override
  Widget build(BuildContext context) {
    // 主题选项
    final List<Map<String, dynamic>> themes = [
      {
        'name': '浅色主题'.tr,
        'value': CustomThemeColor.light,
      },
      {
        'name': '深色主题'.tr,
        'value': CustomThemeColor.dark,
      },
    ];

    return LayoutBuilder(
      builder: (context, bodySize) => GestureDetector(
        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,
                    ),
                  ],
                ),
              ),
              centerTitle: false,
            ),
            body: SafeArea(
              top: true,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 30.rpx),
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      SizedBox(height: 25.rpx),
                      Container(
                        width: double.infinity,
                        decoration: BoxDecoration(
                          color: Color(0xFF242835),
                          borderRadius: BorderRadius.circular(
                              AppConstants().normal_container_radius),
                        ),
                        child: Padding(
                          padding: EdgeInsets.symmetric(vertical: 20.rpx),
                          child: Column(
                            children: themes
                                .map<Widget>((theme) {
                                  bool isSelected =
                                      themeController.currentColor ==
                                          theme['value'];
                                  return ClickableContainer(
                                    backgroundColor: Colors.transparent,
                                    highlightColor:
                                        themeController.currentColor.sc21,
                                    padding: EdgeInsets.symmetric(
                                        vertical: 10.rpx, horizontal: 16.rpx),
                                    onTap: () async {
                                      // 切换主题
                                      themeController
                                          .changeTheme(theme['value']);
                                    },
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          theme['name'],
                                          style: TextStyle(
                                            fontFamily: 'Inter',
                                            color: themeController
                                                .currentColor.sc3,
                                            fontSize: AppConstants()
                                                .title_text_fontSize,
                                          ),
                                        ),
                                        FancyCircleCheckbox(
                                          borderColor:
                                              themeController.currentColor.sc3,
                                          fillColor:
                                              themeController.currentColor.sc2,
                                          value: isSelected,
                                          onChanged: (value) {
                                            themeController
                                                .changeTheme(theme['value']);
                                          },
                                        ),
                                      ],
                                    ),
                                  );
                                })
                                .toList()
                                .divide(
                                  SizedBox(height: 30.rpx),
                                ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}