import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:google_fonts/google_fonts.dart';

// import 'package:uae_stat/config/my_theme.dart';

class ThemedSearchField extends HookWidget {
  const ThemedSearchField({
    super.key,
    required this.hintText,
    this.imgPath,
    this.txtwidth,
    this.txtHeight,
    required this.controller,
    this.validator,
    this.isObscurable = false,
    this.hintColor,
    this.backgroundColor,
    this.borderColor,
    this.errorBorderColor,
    this.errorTextColor,
    this.readOnly = false, // ✅ new
    this.keyboardType, // ✅ new
    this.maxLength, // ✅ new
    this.inputFormatters,
    this.onChanged,
    this.showSearchIcon = true,
  });

  final String hintText;
  final String? imgPath;
  final String? Function(String? text)? validator;
  final TextEditingController controller;
  final void Function(String)? onChanged;
  final bool isObscurable;
  final Color? hintColor;
  final Color? backgroundColor;
  final Color? borderColor;
  final Color? errorBorderColor;
  final Color? errorTextColor;
  final double? txtwidth;
  final double? txtHeight;
  final bool readOnly;
  final TextInputType? keyboardType;
  final int? maxLength;
  final List<TextInputFormatter>? inputFormatters;
  final bool showSearchIcon;

  @override
  Widget build(BuildContext context) {
    final isObscured = useState<bool>(true);
    final boxDecoration = BoxDecoration(borderRadius: BorderRadius.circular(2));

    final inputDecoration = InputDecoration(
      isDense: true,
      contentPadding: const EdgeInsets.symmetric(horizontal: 15), // 2. Remove vertical padding to let it center
      filled: true,
      fillColor: backgroundColor ?? Colors.white,
      // contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 15),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide(color: Color(0xFFE2E8F0)),
        // borderSide: BorderSide(color: Color(0xFFF6F8F8)),
      ),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        // borderSide: BorderSide(color: Color(0xFFF6F8F8)),
        borderSide: BorderSide(color: Color(0xFFE2E8F0)),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide(color: Color(0xFF50A398), width: 2),
      ),
      hintText: hintText,
      hintStyle: GoogleFonts.poppins(
        // color: const Color(0xFF686868),
        color: const Color(0xFF94A3B8),
        fontSize: (txtHeight ?? 45) <= 45 ? 10 : 11,
      ),
      labelStyle: GoogleFonts.poppins(
        // color: const Color(0xFF686868),
        color: const Color(0xFF94A3B8),
        fontSize: (txtHeight ?? 45) <= 45 ? 10 : 11,
      ),

      // suffixIconConstraints: const BoxConstraints(
      //   maxWidth: 25 + 16 + 10,
      //   maxHeight: 25 + (8 * 2),
      // ),
      suffixIcon: showSearchIcon
          ? Padding(
              padding: const EdgeInsetsDirectional.only(start: 16, end: 10),
              child: Icon(
                Icons.search,
                color: const Color(0xFF94A3B8),
                size: 18,
              ),
            )
          : null,
    );

    return Container(
      width: txtwidth ?? MediaQuery.of(context).size.width,
      height: txtHeight ?? 45,
      child: DecoratedBox(
        decoration: boxDecoration,
        child: TextFormField(
          controller: controller,
          onChanged: onChanged,
          textAlignVertical: TextAlignVertical.center, // 4. This centers the typing text and hint
          decoration: inputDecoration,
          validator: validator,
          style: GoogleFonts.poppins(fontSize: 12), // Keep text size appropriate for height 30
        ),
      ),
    );
  }
}