import "package:flutter/material.dart";
import "package:flutter_riverpod/flutter_riverpod.dart";

void main() {
  runApp(const ProviderScope(child: MySearchBarPage()));
}

class MySearchBarPage extends ConsumerWidget {
  const MySearchBarPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("My Search Bar Page"),
        ),
        body: const Center(
          child: MySearchAnchorBar(),
        ),
      ),
    );
  }
}

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

  @override
  State<MySearchAnchorBar> createState() => _MySearchAnchorBarState();
}

class _MySearchAnchorBarState extends State<MySearchAnchorBar> {
  late final SearchController _controller;

  @override
  void initState() {
    super.initState();
    _controller = SearchController();
  }

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

  @override
  Widget build(BuildContext context) {
    return SearchAnchor.bar(
      searchController: _controller,
      barElevation: WidgetStateProperty.all(2),
      barPadding: const WidgetStatePropertyAll(
        EdgeInsets.symmetric(horizontal: 12),
      ),

      viewHeaderTextStyle: const TextStyle(fontSize: 14),
      barTextStyle: WidgetStateProperty.all(
        const TextStyle(fontSize: 14),
      ),
      viewLeading: const Icon(Icons.search),
      viewBarPadding: const EdgeInsets.symmetric(horizontal: 12),
      scrollPadding: EdgeInsets.zero,
      viewPadding: EdgeInsets.zero,
      onSubmitted: (value) {
        _controller.closeView(value);
        // focus is kept on the bar.
      },
      suggestionsBuilder: (context, controller) async {
        final results = await Future.value(<String>["Example1", "Example2"]);

        return [
          for (final element in results)
            ListTile(
              title: Text(
                element,
              ),
              onTap: () {
                print("Selected: $element");
                controller.closeView(element);
              },
            ),
        ];
      },
    );
  }
}