import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/views/widgets/didvan/icon_button.dart';
import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 40,
      child: Row(
        children: [
          Expanded(
            child: Container(
              decoration: BoxDecoration(
                color: _fillColor(),
              ),
              child: TextFormField(
                focusNode: widget.focusNode,
                style: Theme.of(context).textTheme.bodyText2,
                textAlignVertical: TextAlignVertical.center,
                onChanged: widget.onChanged,
                keyboardType: TextInputType.text,
                textInputAction: TextInputAction.search,
                decoration: InputDecoration(
                  focusedBorder: OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      Radius.circular(4),
                    ),
                    borderSide: BorderSide(
                      color: Theme.of(context).colorScheme.primary,
                    ),
                  ),
                  prefixIcon: Icon(
                    DidvanIcons.search_regular,
                    color: Theme.of(context).colorScheme.text,
                  ),
                  prefixIconColor: Theme.of(context).colorScheme.inputText,
                  enabledBorder: OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      Radius.circular(4),
                    ),
                    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: Theme.of(context).colorScheme.disabledText,
                  ),
                ),
              ),
            ),
          ),
          if (widget.onFilterButtonPressed != null) const SizedBox(width: 8),
          if (widget.onFilterButtonPressed != null)
            Stack(
              children: [
                DidvanIconButton(
                  onPressed: widget.onFilterButtonPressed!,
                  icon: widget.isFiltered!
                      ? DidvanIcons.filter_solid
                      : DidvanIcons.filter_regular,
                  size: 32,
                  gestureSize: 32,
                ),
                if (widget.isFiltered!)
                  Positioned(
                    child: Container(
                      width: 10,
                      height: 10,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Theme.of(context).colorScheme.secondary,
                      ),
                    ),
                  ),
              ],
            ),
        ],
      ),
    );
  }

  Color _fillColor() {
    if (widget.focusNode.hasFocus) {
      return Theme.of(context).colorScheme.surface;
    }
    return Theme.of(context).colorScheme.surface;
  }

  @override
  void dispose() {
    super.dispose();
  }
}