import 'package:flutter/material.dart';
import 'package:dialer/features/contacts/contact_page.dart';
import 'package:dialer/features/favorites/favorites_page.dart';
import 'package:dialer/features/history/history_page.dart';
import 'package:dialer/features/composition/composition.dart';

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final SearchController _searchController = SearchController();

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this, initialIndex: 1);
    _tabController.addListener(_handleTabIndex);
  }

  @override
  void dispose() {
    _tabController.removeListener(_handleTabIndex);
    _tabController.dispose();
    super.dispose();
  }

  void _handleTabIndex() {
    setState(() {});
  }

  void _onSearchChanged(String query) {
    // Use this method to manage search actions if needed
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: [
          // Persistent Search Bar
          Padding(
            padding: const EdgeInsets.only(
              top: 24.0, // Outside top padding
              bottom: 10.0, // Outside bottom padding
              left: 16.0, // Outside left padding
              right: 16.0, // Outside right padding
            ),
            child: Container(
              decoration: BoxDecoration(
                color: const Color.fromARGB(
                    255, 30, 30, 30), // Background of the SearchBar
                borderRadius: BorderRadius.circular(12.0),
                border: Border(
                  top: BorderSide(color: Colors.grey.shade800, width: 1),
                  left: BorderSide(color: Colors.grey.shade800, width: 1),
                  right: BorderSide(color: Colors.grey.shade800, width: 1),
                  bottom: BorderSide(color: Colors.grey.shade800, width: 2),
                ),
              ),
              child: SearchAnchor(
                builder: (BuildContext context, SearchController controller) {
                  return SearchBar(
                    controller: controller,
                    padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
                      EdgeInsets.only(
                        top: 10.0, // Inside top padding
                        bottom: 10.0, // Inside bottom padding
                        left: 16.0, // Inside left padding
                        right: 16.0, // Inside right padding
                      ),
                    ),
                    onChanged: _onSearchChanged,
                    onTap: () {
                      controller.openView();
                    },
                    backgroundColor: MaterialStateProperty.all(
                        const Color.fromARGB(255, 30, 30, 30)),
                    hintText: 'Search contacts',
                    hintStyle: MaterialStateProperty.all(
                      const TextStyle(color: Colors.grey, fontSize: 16.0),
                    ),
                    leading: const Icon(
                      Icons.search,
                      color: Colors.grey,
                      size: 24.0,
                    ),
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12.0),
                      ),
                    ),
                  );
                },
                suggestionsBuilder:
                    (BuildContext context, SearchController controller) {
                  return List<ListTile>.generate(5, (int index) {
                    final String item = 'Suggestion $index';
                    return ListTile(
                      title: Text(item),
                      onTap: () {
                        // Close the search view and select suggestion
                        controller.closeView(item);
                      },
                    );
                  });
                },
              ),
            ),
          ),
          // Main content with TabBarView
          Expanded(
            child: Stack(
              children: [
                TabBarView(
                  controller: _tabController,
                  children: const [
                    FavoritePage(),
                    HistoryPage(),
                    ContactPage(),
                  ],
                ),
                Positioned(
                  right: 20,
                  bottom: 20,
                  child: FloatingActionButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const CompositionPage(),
                        ),
                      );
                    },
                    backgroundColor: Colors.blue,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(45),
                    ),
                    child: const Icon(Icons.dialpad, color: Colors.white),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: Container(
        color: Colors.black,
        child: TabBar(
          controller: _tabController,
          tabs: [
            Tab(
                icon: Icon(_tabController.index == 0
                    ? Icons.star
                    : Icons.star_border)),
            Tab(
                icon: Icon(_tabController.index == 1
                    ? Icons.access_time_filled
                    : Icons.access_time_outlined)),
            Tab(
                icon: Icon(_tabController.index == 2
                    ? Icons.contacts
                    : Icons.contacts_outlined)),
          ],
          labelColor: Colors.white,
          unselectedLabelColor: const Color.fromARGB(255, 158, 158, 158),
          indicatorSize: TabBarIndicatorSize.label,
          indicatorColor: Colors.white,
        ),
      ),
    );
  }
}

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

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