import 'package:flutter/material.dart';
import 'package:tencent_chat_i18n_tool/tencent_chat_i18n_tool.dart';
import 'package:tencent_cloud_chat_uikit/base_widgets/tim_ui_kit_state.dart';
import 'package:tencent_cloud_chat_uikit/ui/utils/screen_utils.dart';
import 'package:tencent_cloud_chat_uikit/base_widgets/tim_ui_kit_base.dart';
import 'package:tencent_cloud_chat_uikit/theme/color.dart';
import 'package:tencent_cloud_chat_uikit/theme/tui_theme.dart';

class TIMUIKitSearchInput extends StatefulWidget {
  final ValueChanged<String> onChange;
  final String? initValue;
  final TextEditingController? controller;
  final Widget? prefixIcon;
  final Widget? prefixText;
  final bool? isAutoFocus;
  final FocusNode focusNode;

  const TIMUIKitSearchInput({
    required this.onChange,
    this.initValue,
    this.controller,
    Key? key,
    this.prefixIcon,
    this.isAutoFocus = true,
    this.prefixText,
    required this.focusNode,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => TIMUIKitSearchInputState();
}

class TIMUIKitSearchInputState extends TIMUIKitState<TIMUIKitSearchInput> {
  late TextEditingController textEditingController =
      widget.controller ?? TextEditingController();
  bool isEmptyInput = true;

  @override
  void initState() {
    super.initState();
    textEditingController.text = widget.initValue ?? "";
    isEmptyInput = textEditingController.text.isEmpty;
  }

  hideAllPanel() {
    widget.focusNode.unfocus();
  }

  @override
  Widget tuiBuild(BuildContext context, TUIKitBuildValue value) {
    final TUITheme theme = value.theme;
    final isDesktopScreen =
        TUIKitScreenUtils.getFormFactor(context) == DeviceType.Desktop;
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
      color: Colors.white,
      child: GestureDetector(
        onTap: () {
          // 当点击搜索栏时，聚焦到输入框
          widget.focusNode.requestFocus();
        },
        child: Container(
          height: 42,
          decoration: BoxDecoration(
            color: const Color(0xFFF4F5F6),
            borderRadius: BorderRadius.circular(21),
          ),
          child: Row(
            children: [
              const SizedBox(width: 24),
              Expanded(
                child: TextField(
                  autofocus: widget.isAutoFocus ?? true,
                  onChanged: (value) async {
                    final trimValue = value.trim();
                    final isEmpty = trimValue.isEmpty;
                    if (isEmpty != isEmptyInput) {
                      setState(() {
                        isEmptyInput = isEmpty ? true : false;
                      });
                    }
                    widget.onChange(trimValue);
                  },
                  keyboardType: TextInputType.text,
                  textInputAction: TextInputAction.search,
                  maxLines: 1,
                  focusNode: widget.focusNode,
                  controller: textEditingController,
                  style: const TextStyle(
                    color: Color(0xFF333333),
                    fontSize: 14,
                  ),
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: "请输入您要搜索的内容",
                    hintStyle: const TextStyle(
                      color: Color(0xFFC7CBD1),
                      fontSize: 15,
                    ),
                    contentPadding: EdgeInsets.zero,
                    isDense: true,
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(right: 24),
                child: const Icon(
                  Icons.search,
                  color: Color(0xFFC7CBD1),
                  size: 24,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
