import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/global/global_config.dart';
import 'package:trans_lark/global/translate_manager.dart';
import 'package:trans_lark/widget/t_language_bottom_sheet.dart';

class TLanguageBarWidget extends StatelessWidget {
  const TLanguageBarWidget({
    super.key,
    this.isSelect = false,
    this.onTapFrom,
    this.onTapTo,
  });

  final bool isSelect;
  final Function()? onTapFrom;
  final Function()? onTapTo;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: onTapFrom ?? _onTapFrom,
              child: Obx(() {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      const SizedBox(width: 8),
                      Flexible(
                        child: Text(
                          TranslateManager()
                              .fromLanguageEntity
                              .value
                              .languageName,
                          style: TextStyle(
                            color: !isSelect ||
                                    !TranslateManager()
                                        .isSelectFromLanguage
                                        .value
                                ? const Color(0xff435561)
                                : GlobalConfig.appColor,
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ),
                      const SizedBox(width: 4),
                      Image.asset(
                        Assets.imagesArrowBottom,
                        width: 8,
                        height: 8,
                      ),
                    ],
                  ),
                );
              }),
            ),
          ),
        ),
        const SizedBox(width: 20),
        GestureDetector(
          onTap: _exchangeOnTap,
          child: Container(
            width: 26,
            height: 18,
            decoration: BoxDecoration(
              color: const Color(0xfff1f1f1),
              borderRadius: BorderRadius.circular(9),
            ),
            child: FittedBox(
              fit: BoxFit.none,
              child: Image.asset(
                Assets.imagesExchangeLanguage,
                width: 12,
                height: 12,
              ),
            ),
          ),
        ),
        const SizedBox(width: 20),
        Expanded(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: onTapTo ?? _onTapTo,
              child: Obx(() {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      const SizedBox(width: 8),
                      Flexible(
                        child: Text(
                          TranslateManager()
                              .toLanguageEntity
                              .value
                              .languageName,
                          style: TextStyle(
                            color: !isSelect ||
                                    TranslateManager()
                                        .isSelectFromLanguage
                                        .value
                                ? const Color(0xff435561)
                                : GlobalConfig.appColor,
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ),
                      const SizedBox(width: 4),
                      Image.asset(
                        Assets.imagesArrowBottom,
                        width: 8,
                        height: 8,
                      ),
                    ],
                  ),
                );
              }),
            ),
          ),
        ),
      ],
    );
  }

  void _exchangeOnTap() {
    var tempLanguageCode =
        TranslateManager().toLanguageEntity.value.languageCode;
    var tempLanguageName =
        TranslateManager().toLanguageEntity.value.languageName;

    TranslateManager().toLanguageEntity.update((fn) {
      fn?.languageCode =
          TranslateManager().fromLanguageEntity.value.languageCode;
      fn?.languageName =
          TranslateManager().fromLanguageEntity.value.languageName;
    });
    TranslateManager().fromLanguageEntity.update((fn) {
      fn?.languageCode = tempLanguageCode;
      fn?.languageName = tempLanguageName;
    });
  }

  void _onTapFrom() {
    TranslateManager().isSelectFromLanguage.value = true;
    Get.bottomSheet(
      isScrollControlled: true,
      const TLanguageBottomSheet(),
    );
  }

  void _onTapTo() {
    TranslateManager().isSelectFromLanguage.value = false;
    Get.bottomSheet(
      isScrollControlled: true,
      const TLanguageBottomSheet(),
    );
  }
}