import 'package:flutter/material.dart';
import '../constants.dart';

class SearchBox extends StatefulWidget {
  const SearchBox({
    Key? key,
    this.onChanged,
  }) : super(key: key);

  final ValueChanged? onChanged;

  @override
  State<SearchBox> createState() => _SearchBoxState();
}

class _SearchBoxState extends State<SearchBox> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(kDefaultPadding),
      padding: const EdgeInsets.symmetric(
        horizontal: kDefaultPadding,
        vertical: kDefaultPadding / 4, // 5 top and bottom
      ),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.4),
        borderRadius: BorderRadius.circular(12),
      ),
      child: TextFormField(
        controller: _controller,
        onChanged: widget.onChanged,
        style: const TextStyle(color: Colors.white),
        decoration: InputDecoration(
          enabledBorder: InputBorder.none,
          focusedBorder: InputBorder.none,
          icon: const Icon(Icons.search, color: Colors.white),
          hintText: 'Search',
          hintStyle: const TextStyle(color: Colors.white),
          suffixIcon: _controller.value.text.isNotEmpty ? InkWell(
            onTap: () {
              if(_controller.value.text.isNotEmpty) {
                _controller.clear();
                widget.onChanged!("");
              }
            },
            child: const Icon(Icons.close, color: Colors.white)
          ): const Text(''),
        ),
      ),
    );
  }
}