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> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final GlobalKey<EmailPageState> _emailPageKey = GlobalKey<EmailPageState>();
  ApiService apiService = ApiService();
  bool _isSidebarOpen = true;

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

  @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),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.all(0.0),
                      color: Color.fromARGB(42, 36, 102, 132),
                      child: Row(
                        children: [
                          Container(
                            height: 2,
                          )
                        ],
                      ),
                    ),
                    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: EmailPage(key: _emailPageKey),
                    )
                  ],
                ),
              ),
            ],
          ),
          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