import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trans_lark/entity/language_entity.dart';
import 'package:trans_lark/generated/assets.dart';

class TLanguageSceneBarWidget extends StatelessWidget {
  const TLanguageSceneBarWidget({
    super.key,
    required this.fromLanguage,
    required this.toLanguage,
    required this.onTapFrom,
    required this.onTapTo,
  });

  final Rx<LanguageEntity> fromLanguage;
  final Rx<LanguageEntity> toLanguage;
  final Function()? onTapFrom;
  final Function()? onTapTo;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: onTapFrom,
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    const SizedBox(width: 8),
                    Flexible(
                      child: Obx(() {
                        return Text(
                          fromLanguage.value.languageName,
                          style: const TextStyle(
                            color: Color(0xff435561),
                            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,
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    const SizedBox(width: 8),
                    Flexible(
                      child: Obx(() {
                        return Text(
                          toLanguage.value.languageName,
                          style: const TextStyle(
                            color: Color(0xff435561),
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            overflow: TextOverflow.ellipsis,
                          ),
                        );
                      }),
                    ),
                    const SizedBox(width: 4),
                    Image.asset(
                      Assets.imagesArrowBottom,
                      width: 8,
                      height: 8,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

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

    toLanguage.update((fn) {
      fn?.languageCode = fromLanguage.value.languageCode;
      fn?.languageName = fromLanguage.value.languageName;
    });
    fromLanguage.update((fn) {
      fn?.languageCode = tempLanguageCode;
      fn?.languageName = tempLanguageName;
    });
  }
}