import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_translate/common/components/common_language_selector_bar.dart';
import 'package:flutter_translate/global/app_config.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/manager/translate.dart';
import 'package:flutter_translate/pages/home/home_controller.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/get_state_manager.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height * 0.9,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(26.r),
          topRight: Radius.circular(26.r),
        ),
      ),
      child: Column(
        children: [
          12.verticalSpace,
          Container(
            width: 28.w,
            height: 4.w,
            decoration: BoxDecoration(
              color: const Color(0xffD9D9D9),
              borderRadius: BorderRadius.circular(2.r),
            ),
          ),
          10.verticalSpace,
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10).w,
            child: CommonLanguageSelectorBar(
              isSelect: true,
              changeFromLanguage: () => Translate().changeSelectLanguage(true),
              changeToLanguage: () => Translate().changeSelectLanguage(false),
            ),
          ),
          10.verticalSpace,
          _languageList(),
        ],
      ),
    );
  }

  Widget _languageList() {
    final HomeController homeController = Get.put(HomeController());
    return Expanded(
      child: ListView.builder(
        itemCount: Translate().languageList.length,
        itemBuilder: (context, index) {
          var item = Translate().languageList[index];
          return Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () => Translate().changeLanguage(item),
              child: Container(
                padding: const EdgeInsets.symmetric(
                  vertical: 13,
                  horizontal: 33,
                ).w,
                child: Row(
                  children: [
                    Expanded(
                      child: Obx(() {
                        return Text(
                          item.name,
                          style: TextStyle(
                            color: Translate().isSelectFromLanguage.value
                                ? (item.name ==
                                Translate()
                                    .fromLanguageEntity
                                    .value
                                    .name
                                ? Color(homeController.appColor.value)
                                : const Color(0xff152A3D))
                                : (item.name ==
                                Translate()
                                    .toLanguageEntity
                                    .value
                                    .name
                                ? Color(homeController.appColor.value)
                                : const Color(0xff152A3D)),
                            fontSize: 16.sp,
                            overflow: TextOverflow.ellipsis,
                          ),
                        );
                      }),
                    ),
                    Obx(() {
                      return Visibility(
                        visible: Translate().isSelectFromLanguage.value
                            ? (item.name ==
                            Translate().fromLanguageEntity.value.name)
                            : (item.name ==
                            Translate().toLanguageEntity.value.name),
                        child: Padding(
                          padding: const EdgeInsets.only(left: 10).w,
                          child: Image.asset(
                            Assets.iconStarGreen,
                            color: Color(homeController.appColor.value),
                            width: 16.w,
                            height: 16.w,
                          ),
                        ),
                      );
                    }),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }

// void _itemOnTap(LanguageModel item) {
//   if (Translate().isSelectFromLanguage.value) {
//     Translate().fromLanguageEntity.update((fn) {
//       fn?.code = item.code;
//       fn?.name = item.name;
//     });
//   } else {
//     Translate().toLanguageEntity.update((fn) {
//       fn?.code = item.code;
//       fn?.name = item.name;
//     });
//   }
//   if (Get.isRegistered<HomeController>()) {
//     HomeController.to.initData();
//   }
// }
//
// void _onTapFrom() {
//   Translate().isSelectFromLanguage.value = true;
// }
//
// void _onTapTo() {
//   Translate().isSelectFromLanguage.value = false;
// }
}