import 'package:citycards_customer/common_bloc/language_selection_bloc.dart';
import 'package:citycards_customer/common_packages/custom_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class LanguageSelectionBottomsheet extends StatelessWidget {
  LanguageSelectionBottomsheet({super.key});

  List<String> languages = [
    "English / Englis",
    "Dutch / Nederlands",
    "Spanish / Español",
    "French / Français",
    "Japanese / 日本語",
  ];

  TextEditingController searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 40.w,
            height: 4.h,
            decoration: BoxDecoration(
              color: Color(0xFF2D3134),
              borderRadius: BorderRadius.circular(4.r),
            ),
          ),
          SizedBox(height: 20.h),
          Align(
            alignment: Alignment.topLeft,
            child: Text(
              "Change Language",
              style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.w500),
            ),
          ),
          SizedBox(height: 22.h),
          TextField(
            controller: searchController,
            decoration: InputDecoration(
              hintText: "Search Languages",
              hintStyle: TextStyle(
                fontSize: 14.sp,
                color: Color(0xBBC83B61).withOpacity(0.4),
              ),
              suffixIcon: Image.asset("assets/icons/search.png", scale: 4),
              contentPadding: EdgeInsets.symmetric(horizontal: 24.w),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.r),
                borderSide: BorderSide(
                  color: Color(0xBBC83B61).withOpacity(0.4),
                  width: .4.w,
                ),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.r),
                borderSide: BorderSide(color: Color(0xFFF95F62), width: 1.w),
              ),
            ),
          ),
          SizedBox(height: 12.h),

          BlocBuilder<LanguageBloc, LanguageState>(
            builder: (context, state) {
              return Expanded(
                child: ListView.builder(
                  itemCount: languages.length,
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    final item = languages[index];
                    return ListTile(
                      dense: true,
                      leading: GestureDetector(
                        onTap: () {
                          context.read<LanguageBloc>().add(
                            UpdateLanguage(item),
                          );
                        },
                        child: state.selectedLanguage == item
                            ? Image.asset(
                                "assets/icons/radio_button_checked.png",
                                scale: 4,
                              )
                            : Image.asset(
                                "assets/icons/radio_button_unchecked.png",
                                scale: 4,
                              ),
                      ),
                      title: CustomText(
                        text: item,
                        size: 16.sp,
                        color: state.selectedLanguage == item
                            ? Color(0xFFF95F62)
                            : Color(0xFF000000).withOpacity(.6),
                      ),
                    );
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}
