import 'package:crab_ui/folder_drawer.dart';
import 'package:flutter/widgets.dart';
import 'api_service.dart';
import 'package:flutter/material.dart';
import 'email.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final GlobalKey<EmailPageState> _emailPageKey = GlobalKey<EmailPageState>();
  ApiService apiService = ApiService();
  bool _isSidebarOpen = true;
  bool querySearches = false;

  List<String> _tabs = ['INBOX', 'Search'];
  TabController? _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }
   // Add a new tab based on the search
  void _performSearch(String query) {
    setState(() {
      _tabs.add(query);
      _tabController = TabController(length: _tabs.length, vsync: this);
    });
  }

  // Remove a tab
  void _removeTab(int index) {
    setState(() {
      _tabs.removeAt(index);
      _tabController = TabController(length: _tabs.length, vsync: this);
    });
  }

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


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      drawer: FolderDrawer(
        apiService: apiService,
        onFolderTap: (folder) {
          _emailPageKey.currentState?.updateSelectedFolder(folder);
        },
      ),
      // appBar: AppBar(
      //   title: Text('Search with Tabs'),
      //   bottom: _tabs.isNotEmpty
      //       ? TabBar(
      //           controller: _tabController,
      //           isScrollable: true,
      //           tabs: _tabs
      //               .asMap()
      //               .entries
      //               .map((entry) => Tab(
      //                     child: Row(
      //                       children: [
      //                         Text(entry.value),
      //                         SizedBox(width: 8),
      //                         GestureDetector(
      //                           onTap: () => _removeTab(entry.key),
      //                           child: Icon(Icons.close, size: 16),
      //                         ),
      //                       ],
      //                     ),
      //                   ))
      //               .toList(),
      //         )
      //       : null,
      // ),
      body: Stack(
        children: [
          Row(
            children: [
              // Sidebar
              if (_isSidebarOpen)
                Container(
                  width: 70,
                  color: Color.fromARGB(17, 96, 122, 135),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      ListTile(
                        leading: Icon(Icons.home),
                        onTap: () {
                          // Navigate to Home
                        },
                      ),
                      ListTile(
                        leading: Icon(Icons.settings),
                        onTap: () {
                          // Navigate to Settings
                        },
                      ),
                      ListTile(
                        leading: Icon(Icons.email),
                        onTap: () {
                          _scaffoldKey.currentState?.openDrawer();
                        },
                      ),
                      Spacer(),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Align(
                          alignment: Alignment.bottomLeft,
                          child: IconButton(
                            icon: Icon(Icons.close, color: Colors.white),
                            onPressed: () {
                              setState(() {
                                _isSidebarOpen = false;
                              });
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              // Main content
              Expanded(
                child: Column(
                  children: [
                    Container(
                      padding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 4.0),
                      color: Color.fromARGB(42, 36, 102, 132),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            width: 800,
                            height: 40,
                            child: TextField(
                              decoration: InputDecoration(
                                hintText: 'Search...',
                                border: OutlineInputBorder(),
                                prefixIcon: Icon(Icons.search),
                              ),
                              onSubmitted: (value) {
                                if (value.isNotEmpty) {
                                  _performSearch(value);
                                }
                                //this is the input box i mentioned
                                // if (value == '') {
                                //   setState(() {
                                //     querySearches = false;
                                //   });
                                // }
                                // Future<List<String>> results = apiService
                                //     .sonicSearch('INBOX', 20, 0, value);
                                // // print(value);
                                // print(results);
                                // setState(() {
                                //   querySearches = true;
                                // });

                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(0.0),
                      color: Color.fromARGB(42, 36, 102, 132),
                      child: Row(
                        children: [
                          Container(
                            height: 2,
                          )
                        ],
                      ),
                    ),
                    Container(
                      color: Color.fromARGB(255, 131, 110, 143),
                      child: TabBar(
                        controller: _tabController,
                        isScrollable: true,
                        tabs: _tabs
                            .asMap()
                            .entries
                            .map((entry) => Tab(
                                  child: Row(
                                    children: [
                                      Text(entry.value),
                                      if (entry.value != 'INBOX')
                                        GestureDetector(
                                          onTap: () => _removeTab(entry.key),
                                          child: Icon(Icons.close, size: 16),
                                        ),
                                    ],
                                  ),
                                ))
                            .toList(),
                        labelColor: Colors.white,
                        indicatorColor: Colors.white,
                      ),
                    ),
                    Container(
                      // alignment: Alignment.topLeft,
                      padding: EdgeInsets.all(8.0),
                      color: Colors.white,
                      child: Row(
                        children: [
                          ElevatedButton(
                            onPressed: () {
                              _emailPageKey.currentState
                                  ?.updatePagenation('back');
                            },
                            child: Icon(Icons.navigate_before),
                          ),
                          Text(_emailPageKey.currentState?.getPage() ?? '1'),
                          ElevatedButton(
                            onPressed: () {
                              _emailPageKey.currentState
                                  ?.updatePagenation('next');
                            },
                            child: Icon(Icons.navigate_next),
                          ),
                          
                        ],
                      ),
                    ),
                    Expanded(
                      child: TabBarView(
                        controller: _tabController,
                        children: _tabs.map((tab) {
                          return Center(child: EmailPage(key: _emailPageKey,));
                        }).toList(),
                      ),
                    ),
                    
                    // if (_tabs.isEmpty)
                    //   Expanded(
                    //     child: EmailPage(key: _emailPageKey),
                    //   ),
                    // if (_tabs.isNotEmpty)
                    //   Expanded(
                    //     // child: Text('supposed to be mails'),
                    //     child: TabBarView(
                    //       controller: _tabController,
                    //       children: _tabs
                    //           .map((tab) => Center(child: Text('Results for $tab')))
                    //           .toList(),
                    //     ),
                    //   ),
                  ],
                ),
              ),
            ],
          ),
          if (!_isSidebarOpen)
            Positioned(
              bottom: 16,
              left: 16,
              child: FloatingActionButton(
                child: Icon(Icons.menu),
                onPressed: () {
                  setState(() {
                    _isSidebarOpen = true;
                  });
                },
              ),
            ),
        ],
      ),
    );
  }
}
//   void _showPopupMenu(BuildContext context, Offset position) async {
//     final RenderBox overlay =
//         Overlay.of(context).context.findRenderObject() as RenderBox;

//     await showMenu<String>(
//       context: context,
//       position: RelativeRect.fromLTRB(
//         position.dx,
//         position.dy,
//         overlay.size.width - position.dx,
//         overlay.size.height - position.dy,
//       ),
//       items: <PopupMenuEntry<String>>[
//         PopupMenuItem<String>(
//           value: 'Open',
//           child: Text('Open'),
//         ),
//         PopupMenuItem<String>(
//           value: 'Reply',
//           child: Text('Reply'),
//         ),
//         PopupMenuItem<String>(
//           value: 'Delete',
//           child: Text('Delete'),
//         ),
//       ],
//     );
//   }
// }