import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_translate/generated/assets.dart';
import 'package:flutter_translate/pages/scene_list/scene_list_controller.dart';
import 'package:get/get.dart';

class LanguageSelectorBar extends GetView<SceneListController> {
  const LanguageSelectorBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        _language(true),
        _convertIcon(),
        _language(false),
      ],
    );
  }

  Widget _convertIcon() {
    return GestureDetector(
      onTap: controller.languageConvert,
      child: Container(
        width: 26.w,
        height: 18.w,
        margin: const EdgeInsets.symmetric(horizontal: 15).w,
        padding: const EdgeInsets.symmetric(
          horizontal: 7,
          vertical: 3,
        ).w,
        decoration: BoxDecoration(
          color: const Color(0xfff1f1f1),
          borderRadius: BorderRadius.circular(9.r),
        ),
        child: Image.asset(Assets.iconConvert),
      ),
    );
  }

  Widget _language(isFrom) {
    return Expanded(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () => controller.showChangeLanguageBottomSheet(isFrom),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Flexible(
                child: Obx(() {
                  return Text(
                    isFrom
                        ? controller.fromLanguage.value.name
                        : controller.toLanguage.value.name,
                    style: const TextStyle(
                      color: Color(0xff435561),
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      overflow: TextOverflow.ellipsis,
                    ),
                  );
                }),
              ),
              4.horizontalSpace,
              Image.asset(Assets.iconArrowBottom, width: 8.w),
            ],
          ),
        ),
      ),
    );
  }
}
