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';
import 'package:trans_lark/widget/t_base_scrollbar_widget.dart';

class TLanguageSceneBottomSheet extends StatelessWidget {
  const TLanguageSceneBottomSheet({super.key, required this.languageScene, required this.selectedLanguage});

  final List<LanguageEntity> languageScene;
  final Rx<LanguageEntity> selectedLanguage;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height * 0.6,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(26), topRight: Radius.circular(26),
        ),
      ),
      child: Column(
        children: [
          const SizedBox(height: 12),
          Container(
            width: 28,
            height: 4,
            decoration: BoxDecoration(
              color: const Color(0xffD9D9D9),
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          const SizedBox(height: 10),
          _buildListView(),
        ],
      ),
    );
  }

  Widget _buildListView() {
    return Expanded(
      child: TBaseScrollbarWidget(
        child: ListView.builder(
          itemCount: languageScene.length,
          itemBuilder: (context, index) {
            var item = languageScene[index];
            return Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: () => _itemOnTap(item),
                child: Container(
                  padding: const EdgeInsets.symmetric(vertical: 13, horizontal: 33),
                  child: Row(
                    children: [
                      Expanded(
                        child: Obx(() {
                          return Text(
                            item.languageName,
                            style: TextStyle(
                              color: item.languageName == selectedLanguage.value.languageName ? const Color(0xff4ECA8C) : const Color(0xff152A3D),
                              fontSize: 16,
                              overflow: TextOverflow.ellipsis,
                            ),
                          );
                        }),
                      ),
                      Obx(() {
                        return Visibility(
                          visible: item.languageName == selectedLanguage.value.languageName,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 10),
                            child: Image.asset(
                              Assets.imagesStarGreen,
                              width: 16,
                              height: 16,
                            ),
                          ),
                        );
                      }),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  void _itemOnTap(LanguageEntity item) {
    selectedLanguage.update((fn) {
      fn?.languageCode = item.languageCode;
      fn?.languageName = item.languageName;
    });
    Get.back();
  }
}