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

class SearchField extends StatefulWidget {
  final String title;
  final void Function(String value) onChanged;

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

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

class _SearchFieldState extends State<SearchField> {
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    _focusNode.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      decoration: BoxDecoration(
        color: _fillColor(),
      ),
      child: TextField(
        focusNode: _focusNode,
        style: Theme.of(context).textTheme.bodyText1,
        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),
        ),
      ),
    );
  }

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