// import 'package:crab_ui/email.dart';
import 'api_service.dart';
import 'package:flutter/material.dart';
import 'email.dart';
import 'api_service.dart';
import 'dart:html' as html;
import 'dart:ui_web' as ui;

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

//TODO: ADD ALL THE DIFF FOLDERS TO THE SIDEBAR
class _HomeScreenState extends State<HomeScreen> {
  final _emailPageState = EmailPageState();
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
  }

  bool _isSidebarOpen = true;
  // void holder() async {
  //   List<Widget> drawerItems = await EmailPageState.getDrawerItems(context);
  // }

  @override
  Widget build(BuildContext context) {
    final List<String> emails = [
      'Welcome to Flutter!',
      'You have new updates',
      'Your order is shipped',
      'Important: Security update',
      'Meeting tomorrow',
    ];
    return Scaffold(
      key: _scaffoldKey,
      drawer: Drawer(
        child: Scaffold(
          appBar: AppBar(
            title: Text('somet'),
          ),
          body: Center(
            child: Text('center'),
          ),
        ),
      ),
      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
                        },
                      ),
                      // GestureDetector(

                      //     // onTapDown: (TapDownDetails details) {
                      //     //   _showPopupMenu(context, details.globalPosition);
                      //     // },
                      //   // child: Expanded(
                      //   child: Scaffold(
                      //     appBar: AppBar(
                      //       // leading: Icon(Icons.email),
                      //       // flexibleSpace: Padding(
                      //       //   padding: const EdgeInsets.only(
                      //       //       top: 40), // Adjust padding as needed

                      //         // child: Wrap(
                      //         //   spacing: 10.0,
                      //         //   alignment: WrapAlignment.center,
                      //         //   // children: [
                      //         //   //   ListTile(leading: Icon(Icons.mail),),
                      //         //   //   ListTile(leading: Icon(Icons.mail),),
                      //         //   //   ListTile(leading: Icon(Icons.mail),),
                      //         //   // ],
                      //         // ),
                      //       // ),
                      //       // ],
                      //     ),
                      //     body: ListView.separated(
                      //       itemBuilder: (context, index) {
                      //         return ListTile(
                      //           leading: Icon(Icons.mail),
                      //           title: Text(emails[index]),
                      //         );
                      //       },
                      //       separatorBuilder: (context, index) => Divider(),
                      //       itemCount: 5,
                      //     ),
                      //   )
                      ListTile(
                        leading: Icon(Icons.email),
                        onTap: () {
                          _scaffoldKey.currentState?.openDrawer();
                          // showModalBottomSheet(
                          //   context: context,
                          //   builder: (context) {
                          //     return Scaffold(
                          //       appBar: AppBar(
                          //         title: Text('AppBar-Like Modal'),
                          //         backgroundColor: Colors.purple,
                          //       ),
                          //       body: Center(
                          //         child: Text('This is the content inside the AppBar-like modal'),
                          //       ),
                          //     );
                          //   },
                          // );
                        },
                      ),
                      
                      // leading: SizedBox(
                      //   width: 20,
                      //   child: GestureDetector(
                      //       onTapDown: (TapDownDetails details) {
                      //         _showPopupMenu(context, details.globalPosition);
                      //       },
                      //       child: SizedBox(
                      //         width: 40,
                      //         child: Icon(Icons.email)
                      // ),
                      // ),
                      // ),
                      // ),

                      // trailing: SizedBox(
                      //   width: 20,
                      //   child: PopupMenuButton<String>(
                      //     onSelected: (value) {
                      //       print(value);
                      //       print('ajdsnv');
                      //     },
                      //     itemBuilder: (BuildContext context) {
                      //       return <PopupMenuEntry<String>>[
                      //         PopupMenuItem<String>(
                      //           value: 'Open',
                      //           child: Text('Open'),
                      //         )
                      //       ];
                      //     },
                      //   ),
                      // ),
                      // ),

                      // onTap: () {
                      //   Navigator.push(
                      //     context,
                      //     MaterialPageRoute(
                      //         builder: (context) => EmailPage()),
                      //   );
                      // },

                      // ),

                      // Drawer(
                      //     child: FutureBuilder<List<Widget>>()
                      //   future: _emailPageState.getDrawerItems(context), // call the async function to get the future
                      //   builder: (BuildContext context,
                      //       AsyncSnapshot<List<Widget>> snapshot) {
                      //     if (snapshot.connectionState ==
                      //         ConnectionState.waiting) {
                      //       // While data is loading, show a progress indicator
                      //       return Center(child: CircularProgressIndicator());
                      //     } else if (snapshot.hasError) {
                      //       // If something went wrong, show an error message
                      //       return Center(
                      //           child: Text('Error: ${snapshot.error}'));
                      //     } else {
                      //       // When data is fetched successfully, display the items
                      //       return ListView(
                      //         padding: EdgeInsets.zero,
                      //         children: snapshot
                      //             .data!, // Unwrap the data once confirmed it's there
                      //       );
                      //     }
                      //   },
                      // )
                      // ),
                      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),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(0.0),
                      color: Color.fromARGB(42, 36, 102, 132),
                      child: Row(
                        children: [
                          Container(
                            height: 2,
                          )
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(8.0),
                      color: Colors.white,
                      child: Row(
                        children: [
                          Container(
                            child: Text('hiiiiiii'),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      child: Center(
                        child: EmailPage(),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
          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'),
        ),
      ],
    );
  }
}

//show popup menu