import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:trans_lark/entity/language_entity.dart';
import 'package:trans_lark/generated/assets.dart';
import 'package:trans_lark/global/translate_language.dart';
import 'package:trans_lark/widget/base_scrollbar.dart';
import 'package:trans_lark/widget/language_bar.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height * 0.9,
      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),
          LanguageBar(
            isSelect: true,
            onTapFrom: _onTapFrom,
            onTapTo: _onTapTo,
          ),
          const SizedBox(height: 10),
          _buildListView(),
        ],
      ),
    );
  }

  Widget _buildListView() {
    return Expanded(
      child: BaseScrollbar(
        child: ListView.builder(
          itemCount: TranslateLanguage().languageList.length,
          itemBuilder: (context, index) {
            var item = TranslateLanguage().languageList[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: TranslateLanguage().isSelectFromLanguage.value
                                  ? (item.languageName == TranslateLanguage().fromLanguageEntity.value.languageName ? const Color(0xff4ECA8C) : const Color(0xff152A3D))
                                  : (item.languageName == TranslateLanguage().toLanguageEntity.value.languageName ? const Color(0xff4ECA8C) : const Color(0xff152A3D)),
                              fontSize: 16,
                              overflow: TextOverflow.ellipsis,
                            ),
                          );
                        }),
                      ),
                      Obx(() {
                        return Visibility(
                          visible: TranslateLanguage().isSelectFromLanguage.value
                              ? (item.languageName == TranslateLanguage().fromLanguageEntity.value.languageName)
                              : (item.languageName == TranslateLanguage().toLanguageEntity.value.languageName),
                          child: Padding(
                            padding: const EdgeInsets.only(left: 10),
                            child: Image.asset(
                              Assets.imagesStar,
                              width: 16,
                              height: 16,
                            ),
                          ),
                        );
                      }),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  void _itemOnTap(LanguageEntity item) {
    if (TranslateLanguage().isSelectFromLanguage.value) {
      TranslateLanguage().fromLanguageEntity.update((fn) {
        fn?.languageCode = item.languageCode;
        fn?.languageName = item.languageName;
      });
    } else {
      TranslateLanguage().toLanguageEntity.update((fn) {
        fn?.languageCode = item.languageCode;
        fn?.languageName = item.languageName;
      });
    }
  }

  void _onTapFrom() {
    TranslateLanguage().isSelectFromLanguage.value = true;
  }

  void _onTapTo() {
    TranslateLanguage().isSelectFromLanguage.value = false;
  }
}