import 'package:customer/constant/const_texts.dart';
import 'package:customer/constant/constant.dart';
import 'package:customer/controllers/change_language_controller.dart';
import 'package:customer/service/localization_service.dart';
import 'package:customer/themes/app_them_data.dart';

import 'package:flag/flag_enum.dart';
import 'package:flag/flag_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../../../controllers/theme_controller.dart';

class ChangeLanguageScreen extends StatelessWidget {
  const ChangeLanguageScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final themeController = Get.find<ThemeController>();
    final isDark = themeController.isDark.value;
    return GetX(
      init: ChangeLanguageController(),
      builder: (controller) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor:
                isDark ? AppThemeData.surfaceDark : AppThemeData.surface,
            centerTitle: false,
            titleSpacing: 0,
          ),
          body:
              controller.isLoading.value
                  ? Constant.loader()
                  : Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        height: 100.h,
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                ConstTexts.changeLanguage.tr,
                                style: TextStyle(
                                  fontSize: 24,
                                  color:
                                      isDark
                                          ? AppThemeData.grey50
                                          : AppThemeData.grey900,
                                  fontFamily: AppThemeData.semiBold,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              Text(
                                ConstTexts.selectPrefferedLanguage.tr,
                                style: TextStyle(
                                  fontSize: 16,
                                  color:
                                      isDark
                                          ? AppThemeData.grey50
                                          : AppThemeData.grey900,
                                  fontFamily: AppThemeData.regular,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      _buildLanguageButton(
                        isActive: Get.locale == const Locale("uz", "UZ"),
                        flagCode: FlagsCode.UZ,
                        title: "O'zbekcha",
                        onTap: () async {
                          LocalizationService.changeLocale(
                            const Locale('uz', 'UZ'),
                          );
                        },
                      ),
                      _buildDivider(),
                      _buildLanguageButton(
                        isActive: Get.locale == const Locale('ru', 'RU'),
                        flagCode: FlagsCode.RU,
                        title: "Русский",
                        onTap: () async {
                          LocalizationService.changeLocale(
                            const Locale("ru", "RU"),
                          );
                        },
                      ),
                      _buildDivider(),
                      _buildLanguageButton(
                        isActive: Get.locale == const Locale("en", "US"),
                        flagCode: FlagsCode.US,
                        title: "English",
                        onTap: () async {
                          LocalizationService.changeLocale(
                            const Locale("en", "US"),
                          );
                        },
                      ),

                      // Expanded(
                      //   child: GridView.count(
                      //     crossAxisCount: 2,
                      //     childAspectRatio: (1.1 / 1),
                      //     crossAxisSpacing: 5,
                      //     mainAxisSpacing: 1,
                      //     children:
                      //         controller.languageList
                      //             .map(
                      //               (data) => Obx(
                      //                 () => GestureDetector(
                      //                   onTap: () {
                      //                     LocalizationService().changeLocale(data.slug.toString());
                      //                     Preferences.setString(Preferences.languageCodeKey, jsonEncode(data));
                      //                     controller.selectedLanguage.value = data;
                      //                   },
                      //                   child: Container(
                      //                     padding: const EdgeInsets.all(16),
                      //                     child: Column(
                      //                       children: [
                      //                         NetworkImageWidget(imageUrl: data.image.toString(), height: 80, width: 80),
                      //                         // SvgPicture.network(
                      //                         //   data.image.toString(),
                      //                         //   height: 80,
                      //                         //   width: 80,
                      //                         //   fit: BoxFit.contain,
                      //                         //   placeholderBuilder: (context) => const Center(child: CircularProgressIndicator(strokeWidth: 1.5)),
                      //                         // ),
                      //                         const SizedBox(height: 5),
                      //                         Text(
                      //                           "${data.title}",
                      //                           style: TextStyle(
                      //                             fontSize: 16,
                      //                             color:
                      //                                 controller.selectedLanguage.value.slug == data.slug
                      //                                     ? AppThemeData.primary300
                      //                                     : isDark
                      //                                     ? AppThemeData.grey400
                      //                                     : AppThemeData.grey500,
                      //                             fontFamily: AppThemeData.medium,
                      //                             fontWeight: FontWeight.w400,
                      //                           ),
                      //                         ),
                      //                       ],
                      //                     ),
                      //                   ),
                      //                 ),
                      //               ),
                      //             )
                      //             .toList(),
                      //   ),
                      // ),
                    ],
                  ),
        );
      },
    );
  }

  Widget _buildDivider() => Padding(
    padding: EdgeInsetsGeometry.symmetric(horizontal: 16.r),
    child: Divider(thickness: 1.2.r),
  );

  InkWell _buildLanguageButton({
    required bool isActive,
    required VoidCallback onTap,
    required String title,
    required FlagsCode flagCode,
  }) {
    return InkWell(
      hoverColor: Colors.transparent,
      splashColor: Colors.transparent,
      overlayColor: WidgetStatePropertyAll(Colors.transparent),
      onTap: onTap,
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 15.r).copyWith(right: 16.r),

        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Flag.fromCode(
                  flagCode,
                  height: 40.h,
                  width: 90.w,
                  borderRadius: 12.r,
                ),
                Text(
                  title,
                  style: AppThemeData.mediumTextStyle(
                    fontSize: 16.sp,
                    color: AppThemeData.darkGrey,
                  ),
                ),
              ],
            ),
            isActive
                ? Icon(
                  Icons.circle,
                  color: AppThemeData.darkGrey.withValues(alpha: 0.6),
                  size: 15.r,
                )
                : SizedBox.shrink(),
          ],
        ),
      ),
    );
  }
}
