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

class SearchField extends StatefulWidget {
  const SearchField({Key? key}) : 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: (value) {},
        keyboardType: TextInputType.text,
        textInputAction: TextInputAction.search,
        decoration: InputDecoration(
          focusedBorder: OutlineInputBorder(
            borderRadius: const BorderRadius.all(
              Radius.circular(4),
            ),
            borderSide: BorderSide(
              color: Theme.of(context).primaryColor,
            ),
          ),
          prefixIcon: const Icon(
            DidvanIcons.search_regular,
          ),
          enabledBorder: const OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(4),
            ),
            borderSide: BorderSide(
              color: DesignConfig.greyColor4,
            ),
          ),
          fillColor: Colors.red,
          contentPadding: const EdgeInsets.only(
            left: 12,
            right: 12,
            bottom: 8,
          ),
          border: InputBorder.none,
          hintText: 'جستجو مطلب در رادار',
          hintStyle: Theme.of(context)
              .textTheme
              .subtitle2!
              .copyWith(color: DesignConfig.greyColor5),
        ),
      ),
    );
  }

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