import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutterflow_ui/flutterflow_ui.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/component/tool/ClickableContainer.dart';
import '../../common/util/MyUtils.dart';

class ListSearchWidget extends GetView {
  final String? keyword;
  final Color? color;
  String? hint;
  Function? onChange;
  Function? findCallback;
  final EdgeInsetsGeometry? padding;
  final List<String>? searchResults; // 新增：搜索结果列表
  final Function(String)? onResultTap; // 新增：点击结果的回调
  final bool showResultList; // 新增：是否显示结果列表，默认不显示

  ListSearchWidget({
    required this.keyword,
    required this.color,
    this.hint = "请输入关键字",
    this.findCallback,
    this.onChange,
    this.padding,
    this.searchResults, // 搜索结果
    this.onResultTap, // 点击结果回调
    this.showResultList = false, // 默认不显示结果列表
  });

  final RxBool _showResults = false.obs; // 控制是否显示结果列表

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 搜索框部分
        Padding(
          padding:
              padding ?? EdgeInsetsDirectional.fromSTEB(30.rpx, 0, 30.rpx, 0),
          child: Container(
            width: double.infinity,
            decoration: BoxDecoration(
              color: themeController.currentColor.sc3,
              borderRadius: BorderRadius.circular(16.rpx),
            ),
            child: Padding(
              padding: EdgeInsetsDirectional.fromSTEB(35.rpx, 0, 0.rpx, 0),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Container(
                          width: 25.rpx,
                          height: 25.rpx,
                          decoration: BoxDecoration(),
                          child: SvgPicture.asset(
                            'assets/img/icon/query.svg',
                            fit: BoxFit.cover,
                            color: stringToColor("#333333"),
                          ),
                        ),
                        Expanded(
                          child: Container(
                            width: 100.rpx,
                            height: 60.rpx,
                            decoration: BoxDecoration(
                              color: Colors.white,
                            ),
                            child: Align(
                              alignment: AlignmentDirectional(-1, 0),
                              child: TextFormField(
                                autofocus: false,
                                obscureText: false,
                                decoration: InputDecoration(
                                  isDense: true,
                                  labelStyle: TextStyle(
                                    fontFamily: 'Inter',
                                    fontSize: 26.rpx,
                                    letterSpacing: 0.0,
                                  ),
                                  hintText: hint,
                                  hintStyle: TextStyle(
                                    fontFamily: 'Inter',
                                    fontSize: 26.rpx,
                                    letterSpacing: 0.0,
                                    color: themeController.currentColor.sc4,
                                  ),
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                      color: Color(0x00000000),
                                      width: 1.rpx,
                                    ),
                                    borderRadius: BorderRadius.circular(8.rpx),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                      color: Color(0x00000000),
                                      width: 1.rpx,
                                    ),
                                    borderRadius: BorderRadius.circular(8.rpx),
                                  ),
                                  errorBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                      width: 1.rpx,
                                    ),
                                    borderRadius: BorderRadius.circular(8.rpx),
                                  ),
                                  focusedErrorBorder: OutlineInputBorder(
                                    borderSide: BorderSide(
                                      width: 1.rpx,
                                    ),
                                    borderRadius: BorderRadius.circular(8.rpx),
                                  ),
                                  filled: false,
                                  fillColor: themeController.currentColor.sc22,
                                  contentPadding: EdgeInsets.symmetric(
                                      vertical: 12.rpx, horizontal: 12.rpx),
                                ),
                                style: TextStyle(
                                  fontFamily: 'Inter',
                                  fontSize: 26.rpx,
                                  color: Colors.black,
                                  letterSpacing: 0.0,
                                ),
                                onChanged: (d) {
                                  onChange?.call(d);
                                  // 输入时自动显示结果列表（如果开启了显示功能）
                                  if (showResultList && d.isNotEmpty) {
                                    _showResults.value = true;
                                  } else {
                                    _showResults.value = false;
                                  }
                                },
                                onTap: () {
                                  // 点击输入框时显示结果列表（如果开启了显示功能且有搜索结果）
                                  if (showResultList &&
                                      searchResults != null &&
                                      searchResults!.isNotEmpty) {
                                    _showResults.value = true;
                                  }
                                },
                              ),
                            ),
                          ),
                        ),
                      ].divide(SizedBox(width: 6.rpx)),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsetsDirectional.fromSTEB(0.rpx, 0, 0, 0),
                    child: ClickableContainer(
                      backgroundColor: Colors.transparent,
                      highlightColor:
                          themeController.currentColor.sc4.withOpacity(0.8),
                      padding: EdgeInsets.fromLTRB(0, 0, 35.rpx, 0),
                      onTap: () {
                        findCallback?.call();
                        // 点击搜索按钮后显示结果列表（如果开启了显示功能）
                        if (showResultList) {
                          _showResults.value = true;
                        }
                      },
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          SizedBox(
                            height: 30.rpx,
                            child: VerticalDivider(
                              thickness: 2.rpx,
                              color: stringToColor("#333333"),
                            ),
                          ),
                          Text(
                            '搜索'.tr,
                            style: TextStyle(
                              fontFamily: 'Inter',
                              fontSize: 30.rpx,
                              letterSpacing: 0.0,
                              color: stringToColor("#333333"),
                            ),
                          ),
                        ].divide(SizedBox(width: 26.rpx)),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),

        // 搜索结果列表（可选显示）
        if (showResultList) ...[
          Obx(() {
            if (!_showResults.value ||
                searchResults == null ||
                searchResults!.isEmpty) {
              return SizedBox.shrink();
            }

            return Container(
              margin: EdgeInsets.only(top: 10.rpx),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8.rpx),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black12,
                    blurRadius: 4.rpx,
                    offset: Offset(0, 2.rpx),
                  ),
                ],
              ),
              constraints: BoxConstraints(
                maxHeight: 200.rpx, // 限制最大高度
              ),
              child: ListView.builder(
                shrinkWrap: true,
                physics: ClampingScrollPhysics(),
                itemCount: searchResults!.length,
                itemBuilder: (context, index) {
                  final result = searchResults![index];
                  return ListTile(
                    contentPadding: EdgeInsets.symmetric(
                      horizontal: 20.rpx,
                      vertical: 8.rpx,
                    ),
                    title: Text(
                      result,
                      style: TextStyle(
                        fontFamily: 'Inter',
                        fontSize: 26.rpx,
                        color: Colors.black,
                      ),
                    ),
                    onTap: () {
                      onResultTap?.call(result);
                      _showResults.value = false; // 选择后隐藏结果列表
                    },
                  );
                },
              ),
            );
          }),
        ],
      ],
    );
  }
}