import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kaer_with_panels/app/model/kr_area_code.dart';
import 'package:kaer_with_panels/app/widgets/kr_app_text_style.dart';

import '../controllers/kr_search_area_controller.dart';

class KRSearchAreaView extends GetView<KRSearchAreaController> {
  final Function(KRAreaCodeItem, int) onSelect;

  const KRSearchAreaView({super.key, required this.onSelect});

  static void show(Function(KRAreaCodeItem, int) onSelect) {
    Get.dialog(
      KRSearchAreaView(onSelect: onSelect),
      barrierDismissible: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context); // 获取当前主题
    Get.lazyPut<KRSearchAreaController>(
      () => KRSearchAreaController(),
    );

 
    return GestureDetector(
      onTap: () => Get.back(), // 点击背景关闭弹框
      child: Scaffold(
        backgroundColor: Colors.black.withOpacity(0.0),
        body: Center(
          child: GestureDetector(
            onTap: () {}, // 阻止点击事件传递到背景
            child: Container(
              width: 300.w,
              height: 450.w,
              padding: EdgeInsets.all(16.w),
              decoration: BoxDecoration(
                color: theme.primaryColor,
                borderRadius: BorderRadius.circular(15.w),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '选择其他地区',
                    style: KrAppTextStyle(
                        fontSize: 15.w,
                        fontWeight: FontWeight.w500,
                        color: theme.textTheme.titleMedium?.color),
                  ),
                  SizedBox(height: 10.w),
                  TextField(
                    onChanged: (value) => controller.searchQuery.value = value,
                    decoration: InputDecoration(
                      prefixIcon: Icon(Icons.search, color: Colors.grey),
                      hintText: '搜索',
                      hintStyle: TextStyle(color: Colors.grey),
                      filled: true,
                      // fillColor: Colors.grey.shade200,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8.w),
                        borderSide: BorderSide.none,
                      ),
                      contentPadding: EdgeInsets.symmetric(vertical: 10.w),
                    ),
                           style: theme.textTheme.bodyMedium?.copyWith(fontSize: 14.sp,    fontFamily: 'AlibabaPuHuiTi-Regular',),
                  ),
                  // SizedBox(height: 5.w),
                  Obx(() => Expanded(
                        child: ListView.builder(
                          padding: EdgeInsets.zero,
                          shrinkWrap: true,
                          itemCount: controller.filteredAreas.length,
                          itemBuilder: (context, index) {
                            final area = controller.filteredAreas[index];
                            return GestureDetector(
                              onTap: () {
                                onSelect(area, index); // 调用回调函数
                                Get.back();
                              },
                              child: Container(
                                padding: EdgeInsets.symmetric(
                                    vertical: 10.w, horizontal: 0),
                                decoration: BoxDecoration(
                                  border: Border(
                                    bottom: BorderSide(
                                      color: Colors.grey.shade300,
                                      width: 0.2,
                                    ),
                                  ),
                                ),
                                child: Row(
                                  children: [
                                    
                                    Text(area.kr_icon,
                                        style: TextStyle(fontSize: 20.w)),
                                    SizedBox(width: 12.w),
                                    Expanded(
                                      child: Text(
                                        area.kr_name,
                                        style: KrAppTextStyle(
                                            fontSize: 13.w,
                                            fontWeight: FontWeight.w500),
                                      ),
                                    ),
                                    Text(
                                      "+" + area.kr_dialCode,
                                      style: KrAppTextStyle(
                                          fontSize: 13.w,
                                          fontWeight: FontWeight.w500),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                        ),
                      )),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
