class SearchWidget extends StatefulWidget {
  const SearchWidget({super.key});

  @override
  State<SearchWidget> createState() => _SearchWidgetState();
}

class _SearchWidgetState extends State<SearchWidget> {
  final TextEditingController controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      final bloc = Provider.of<MainBloc>(context, listen: false);
      controller.addListener(() => bloc.updateText(controller.text));
      controller.addListener(() => setState(() {}));
    });
  }

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

  BorderSide _getBorderSideByText() {
    return controller.text.isNotEmpty
        ? const BorderSide(
            color: SuperheroesColors.textWhite,
            width: 2,
          )
        : const BorderSide(color: SuperheroesColors.white24, width: 2);
  }

  @override
  Widget build(BuildContext context) {
    final MainBloc bloc = Provider.of<MainBloc>(context, listen: false);
    return TextField(
      controller: controller,
      cursorColor: SuperheroesColors.textWhite,
      textInputAction: TextInputAction.search,
      textCapitalization: TextCapitalization.words,
      style: const TextStyle(
          fontWeight: FontWeight.w400,
          fontSize: 20,
          color: SuperheroesColors.textWhite),
      decoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: const BorderSide(
            color: SuperheroesColors.textWhite,
            width: 2,
          ),
        ),
        filled: true,
        fillColor: SuperheroesColors.backgroundSecondary75,
        isDense: true,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        prefixIcon: const Icon(
          Icons.search,
          color: SuperheroesColors.white54,
          size: 24,
        ),
        suffix: GestureDetector(
          onTap: () => controller.clear(),
          child: const Icon(
            Icons.clear,
            color: SuperheroesColors.textWhite,
            size: 24,
          ),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: _getBorderSideByText(),
        ),
      ),
    );
  }
}