import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'back_button.dart';

class CustomSearchNavigationBar extends StatefulWidget implements PreferredSizeWidget {
  final ValueChanged<String>? onSearchChanged;
  final String? hintText;
  final String? backgroundImage;
  final bool showBackButton;
  final List<Widget> rightButtons;

  const CustomSearchNavigationBar({
    super.key,
    this.onSearchChanged,
    this.hintText = 'Tìm kiếm...',
    this.backgroundImage = "assets/images/bg_header_navi.png",
    this.showBackButton = true,
    this.rightButtons = const [],
  });

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  _CustomSearchNavigationBarState createState() => _CustomSearchNavigationBarState();
}

class _CustomSearchNavigationBarState extends State<CustomSearchNavigationBar> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;

    return Container(
      height: statusBarHeight + kToolbarHeight,
      decoration: BoxDecoration(
        image: widget.backgroundImage != null
            ? DecorationImage(
          image: AssetImage(widget.backgroundImage!),
          fit: BoxFit.cover,
        )
            : null,
        color: widget.backgroundImage == null ? Colors.white : null,
      ),
      child: SafeArea(
        bottom: false,
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              left: widget.showBackButton ? 68 : 16,
              right: widget.rightButtons.isNotEmpty ? 60 : 16,
              child: Container(
                height: 36,
                padding: const EdgeInsets.symmetric(horizontal: 8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Row(
                  children: [
                    const Icon(Icons.search, size: 20),
                    const SizedBox(width: 4),
                    Expanded(
                      child: TextField(
                        controller: _controller,
                        onChanged: (value) {
                          setState(() {}); // Update UI for suffix icon
                          widget.onSearchChanged?.call(value);
                        },
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: widget.hintText,
                          isDense: true,
                          contentPadding: EdgeInsets.zero,
                        ),
                      ),
                    ),
                    if (_controller.text.isNotEmpty)
                      GestureDetector(
                        onTap: () {
                          _controller.clear();
                          widget.onSearchChanged?.call('');
                          setState(() {});
                        },
                        child: const Icon(Icons.close, size: 20),
                      ),
                  ],
                ),
              ),
            ),
            if (widget.showBackButton)
              Positioned(
                left: 12,
                child: CustomBackButton(),
              ),
            if (widget.rightButtons.isNotEmpty)
              Positioned(
                right: 12,
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: widget.rightButtons,
                ),
              ),
          ],
        ),
      ),
    );
  }
}