import 'package:country_flags/country_flags.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:translator_lux/global/global_state.dart';
import 'package:translator_lux/util/image_asset.dart';
import 'package:translator_lux/widget/language_bottom_sheet.dart';

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        GestureDetector(
          onTap: () {
            languageBottonSheet(context, (language) {
              if (language != null) {
                GlobalState.fromCountryName.value = language.languageName;
                GlobalState.fromCountryCode.value = language.countryCode;
                GlobalState.fromLanguageCode.value = language.languageCode;
              } else {
                debugPrint("no such country");
              }
            });
          },
          child: Obx(
            () => SizedBox(
              height: 25,
              child: Row(
                children: [
                  CountryFlag.fromCountryCode(
                    GlobalState.fromCountryCode.value,
                    width: 24,
                    height: 24,
                    shape: const Circle(),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: SizedBox(
                      width: 55,
                      child: Text(
                        GlobalState.fromCountryName.value,
                        style: const TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 4),
                    child: Image.asset(
                      ImageAsset.toHomeBottom,
                      width: 12,
                      height: 12,
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
        GestureDetector(
          onTap: () {
            var tempCountryName = GlobalState.toCountryName.value;
            var tempCountryCode = GlobalState.toCountryCode.value;
            var tempLanguageName = GlobalState.toLanguageCode.value;

            GlobalState.toCountryName.value = GlobalState.fromCountryName.value;
            GlobalState.toCountryCode.value = GlobalState.fromCountryCode.value;
            GlobalState.toLanguageCode.value =
                GlobalState.fromLanguageCode.value;

            GlobalState.fromCountryName.value = tempCountryName;
            GlobalState.fromCountryCode.value = tempCountryCode;
            GlobalState.fromLanguageCode.value = tempLanguageName;
          },
          child: Container(
            width: 26,
            height: 16,
            decoration: BoxDecoration(
                color: const Color(0xffF1F1F1),
                borderRadius: BorderRadius.circular(8)),
            child: Image.asset(ImageAsset.switchHomeIcon),
          ),
        ),
        GestureDetector(
          onTap: () {
            languageBottonSheet(context, (language) {
              if (language != null) {
                GlobalState.toCountryName.value = language.languageName;
                GlobalState.toCountryCode.value = language.countryCode;
                GlobalState.toLanguageCode.value = language.languageCode;
              } else {
                debugPrint("no such country");
              }
            });
          },
          child: Obx(
            () => SizedBox(
              height: 25,
              child: Row(
                children: [
                  CountryFlag.fromCountryCode(
                    GlobalState.toCountryCode.value,
                    width: 24,
                    height: 24,
                    shape: const Circle(),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: SizedBox(
                      width: 55,
                      child: Text(
                        GlobalState.toCountryName.value,
                        style: const TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            overflow: TextOverflow.ellipsis),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 4),
                    child: Image.asset(
                      ImageAsset.toHomeBottom,
                      width: 12,
                      height: 12,
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}