import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class SearchField extends StatefulWidget {
  final String title;
  final FocusNode focusNode;
  final bool? isFiltered;
  final void Function(String value) onChanged;
  final VoidCallback? onFilterButtonPressed;
  final VoidCallback? onGoBack;
  final String? value;
  final String? extraIconPath;
  final VoidCallback? onExtraIconPressed;

  const SearchField({
    Key? key,
    required this.title,
    required this.onChanged,
    required this.focusNode,
    this.onFilterButtonPressed,
    this.isFiltered,
    this.onGoBack,
    this.value,
    this.extraIconPath,
    this.onExtraIconPressed,
  }) : super(key: key);

  @override
  State<SearchField> createState() => _SearchFieldState();
}

class _SearchFieldState extends State<SearchField> {
  @override
  void initState() {
    widget.focusNode.addListener(() {
      if (mounted) {
        setState(() {});
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 47,
      child: Row(
        children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: DesignConfig.isDark? const Color.fromARGB(255, 188, 188, 188) : const Color.fromARGB(255, 235, 235, 235),
                borderRadius: BorderRadius.circular(40),
              ),
              child: TextFormField(
                initialValue: widget.value,
                focusNode: widget.focusNode,
                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                      color:Colors.black,
                    ),
                textAlignVertical: TextAlignVertical.center,
                onChanged: widget.onChanged,
                keyboardType: TextInputType.text,
                textInputAction: TextInputAction.search,
                decoration: InputDecoration(
                  suffixIcon: widget.onFilterButtonPressed != null
                      ? SizedBox(
                          width: 48,
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Padding(
                              padding: const EdgeInsets.only(left: 8),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Stack(
                                    children: [
                                      GestureDetector(
                                        onTap: widget.onFilterButtonPressed!,
                                        child: Container(
                                          width: 27,
                                          height: 27,
                                          padding: const EdgeInsets.all(4),
                                          child: SvgPicture.asset(
                                            "lib/assets/icons/search sort.svg",
                                          ),
                                        ),
                                      ),
                                      if (widget.isFiltered!)
                                        Positioned(
                                          child: Container(
                                            width: 10,
                                            height: 10,
                                            decoration: BoxDecoration(
                                              shape: BoxShape.circle,
                                              color: Theme.of(context)
                                                  .colorScheme
                                                  .secondary,
                                            ),
                                          ),
                                        ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ),
                        )
                      : null,
                  focusedBorder: OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      Radius.circular(35),
                    ),
                    borderSide: BorderSide(
                      color: Theme.of(context).colorScheme.primary,
                    ),
                  ),
                  prefixIcon: GestureDetector(
                    onTap: widget.onGoBack,
                    child: Padding(
                      padding: const EdgeInsets.all(11.0),
                      child: SvgPicture.asset(
                        widget.onGoBack == null
                            ? 'lib/assets/icons/search.svg'
                            : 'lib/assets/icons/search.svg',
                        width: 23,
                        height: 23,
                      ),
                    ),
                  ),
                  prefixIconColor: Theme.of(context).colorScheme.inputText,
                  enabledBorder: OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      Radius.circular(20),
                    ),
                    borderSide: BorderSide(
                      color: Theme.of(context).colorScheme.border,
                    ),
                  ),
                  fillColor: Colors.red,
                  contentPadding: const EdgeInsets.only(
                    left: 12,
                    right: 12,
                  ),
                  border: InputBorder.none,
                  hintText: 'جست‌وجو در ${widget.title}',
                  hintStyle: TextStyle(
                    color: DesignConfig.isDark? const Color.fromARGB(255, 98, 98, 98) : const Color.fromARGB(255, 122, 122, 122),
                    fontSize: 13,
                  ),
                ),
              ),
            ),
          ),
          if (widget.extraIconPath != null && widget.onExtraIconPressed != null) ...[
            const SizedBox(width: 8),
            GestureDetector(
              onTap: widget.onExtraIconPressed,
              child: Container(
                width: 47,
                height: 47,
                decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.primary,
                  shape: BoxShape.circle,
                ),
                child: Center(
                  child: SvgPicture.asset(
                    "lib/assets/icons/live ai.svg",
                    width: 24,
                    height: 24,
                    colorFilter: const ColorFilter.mode(
                      Colors.white,
                      BlendMode.srcIn,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ],
      ),
    );
  }



  @override
  void dispose() {
    widget.focusNode.removeListener(() {});
    super.dispose();
  }
}