import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_rx/src/rx_workers/utils/debouncer.dart';

import 'one_form_component.dart';

class SearchFormComponent extends HookWidget {
  const SearchFormComponent({
    Key? key,
    this.isUseBarcodeScanner = true,
    required this.hintText,
    required this.searchCtr,
    this.descScannerText = '',
    required this.onSearchChanged,
  }) : super(key: key);

  final bool isUseBarcodeScanner;
  final String hintText;
  final TextEditingController searchCtr;
  final String descScannerText;
  final Function(String value) onSearchChanged;

  @override
  Widget build(BuildContext context) {
    final _debouncer = useMemoized(
      () => Debouncer(
        delay: const Duration(milliseconds: 500),
      ),
    );
    final _focusNode = useFocusNode();
    final _isSearchEmpty = useState(true);

    useEffect(() {
      searchCtr.addListener(
        () => _isSearchEmpty.value = searchCtr.text.isEmpty,
      );
      return () {};
    }, const []);

    return SizedBox(
      width: isUseBarcodeScanner ? 0.8.sw : 0.91.sw,
      child: OneFormComponent(
        formCtr: searchCtr,
        focusNode: _focusNode,
        isUseOutlineBorder: true,
        maxLines: 1,
        textInputType: TextInputType.text,
        hintText: hintText,
        isUseprefix: true,
        prefixIcon: const Icon(
          Icons.search,
          color: Colors.grey,
        ),
        isUseSuffix: !_isSearchEmpty.value,
        suffixIcon: GestureDetector(
          onTap: () {
            searchCtr.clear();
            _debouncer.call(() {
              onSearchChanged(searchCtr.text);
            });
          },
          child: const Icon(
            Icons.cancel,
            color: Colors.grey,
          ),
        ),
        onChanged: (value) {
          _debouncer.call(() {
            onSearchChanged(value!);
          });

          return null;
        },
      ),
    );
  }
}