import 'package:crab_ui/folder_drawer.dart';
import 'package:crab_ui/structs.dart';
import 'package:flutter/widgets.dart';
import 'api_service.dart';
import 'package:flutter/material.dart';
import 'email.dart';
// import 'serialize.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;
  String? _selectedOption = "INBOX";

  List<String> _tabs = ['Emails'];
  Map<String, Widget> _tabWidgets = {};
  TabController? _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
    _tabWidgets['Emails'] = EmailPage(
      key: _emailPageKey,
    );
  }

  // Add a new tab based on the search
  void _performSearch(String query, String? list) {
    setState(() {
      if (!_tabs.contains(query)) {
        _tabs.add(query);
        _tabWidgets[query] = _buildSearchResultsWidget(
            query, list); // Store a different widget for this tab
        _tabController = TabController(length: _tabs.length, vsync: this);
      }
    });
  }

  void _showOptionsSearchDialog () async {
    List<String> folders = await apiService.fetchFolders();

    if (mounted) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Choose an Option'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: folders.map((option) {
              return ListTile(
                title: Text(option),
                leading: Radio<String>(
                  value: option,
                  groupValue: _selectedOption, // Bind with _selectedOption
                  onChanged: (String? value) {
                    setState(() {
                      _selectedOption = value;
                    });
                    Navigator.of(context).pop(); // Close the dialog on selection
                  },
                ),
              );
            }).toList(),
          ),
          actions: <Widget>[
            ElevatedButton(
              child: Text('Submit'),
              onPressed: () {
                Navigator.of(context).pop(); // Close the dialog
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                  content: Text('You selected: $_selectedOption'),
                ));
              },
            ),
          ],
        );
      },
    );}
  }
  

  // Remove a tab
  void _removeTab(int index) {
    if (_tabs[index] != 'Emails') {
      setState(() {
        String tabToRemove = _tabs[index];
        _tabs.removeAt(index);
        _tabWidgets
            .remove(tabToRemove); // Remove widget associated with the tab
        _tabController = TabController(length: _tabs.length, vsync: this);
      });
    }
  }

  // Build a custom widget for each search query
  Widget _buildSearchResultsWidget(String query, String? list) {
    return FutureBuilder<List<SerializableMessage>>(
      future: apiService.sonicSearch(list ?? "INBOX", 50, 0, query),
      builder: (BuildContext context,
          AsyncSnapshot<List<SerializableMessage>> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
          return Center(child: Text('No results found for: $query'));
        } else {
          List<SerializableMessage> result = snapshot.data!;
          return Scaffold(
            body: ListView.separated(
              itemCount: result.length,
              itemBuilder: (context, index) {
                final email = result[index];
                return ListTile(
                  title: Text(email.from,
                      style: TextStyle(fontWeight: FontWeight.bold)),
                  subtitle: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [Text(email.subject)],
                  ),
                  trailing: Text(email.date.toString()),
                  onTap: () async {
                    // print('tapped');
                    String emailContent =
                        await apiService.fetchEmailContent([email.id]);
                    // print('content below');
                    // print(emailContent);
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => EmailView(
                          emailContent: emailContent,
                          from: email.from,
                          name: email.name,
                          to: email.to.toString(),
                          subject: email.subject,
                          date: email.date.toString(),
                          id: email.id.toString(),
                        ),
                      ),
                    );
                  },
                );
              },
              separatorBuilder: (context, index) => Divider(),
            ),
            // child: Column(
            //   mainAxisAlignment: MainAxisAlignment.center,
            //   children: [
            //     Text("Results for: $query", style: TextStyle(fontSize: 24)),
            //     // Display the actual data
            //     Text(result[0].name), // Accessing the first result safely
            //     Text(result[0].from), // Displaying the 'from' field as an example
            //     Text(result[0].hash),
            //     Text(result[0].subject),
            //     Text(result[0].uid.toString()),
            //     Text(result[0].list),
            //     Text(result[0].id),

            //     // Add more fields or customize the display
            //     // SerializableEmailListScreen(emails: result, getEmailContent: getEmailContent)
            //     // Expanded(

            //     //   child:
            //     // ),
            // ],
          );
          // );
        }
      },
    );
  }

  @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);
        },
      ),
      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, _selectedOption);
                                }
                                //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;
                                // });
                              },
                            ),
                          ),
                          SizedBox(
                            width: 16,
                          ),
                          Container(
                            width: 80,
                            height: 40,
                            child: ElevatedButton(
                              onPressed: _showOptionsSearchDialog,
                              child: Icon(Icons.manage_search),
                            ),
                          )
                        ],
                      ),
                    ),
                    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 != 'Emails')
                                        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 _tabWidgets[tab] ??
                              Center(child: Text("No content found"));
                          // 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'),
//         ),
//       ],
//     );
//   }
// }