// custom_menu_icon.dart

import 'package:flutter/material.dart';

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

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

class CustomMenuState extends State<CustomMenu> {
  OverlayEntry? _menuOverlay;

  void _toggleMenuOverlay() {
    if (_menuOverlay == null) {
      final RenderBox renderBox = context.findRenderObject() as RenderBox;
      final position = renderBox.localToGlobal(Offset.zero);

      _menuOverlay = OverlayEntry(
        builder: (context) => Stack(
          children: [
            // Detect taps outside the menu
            GestureDetector(
              onTap: _removeMenuOverlay,
              behavior:
                  HitTestBehavior.translucent, // Ensures taps are detected
              child: Container(
                color: Colors
                    .transparent, // Transparent background for full-screen detection
              ),
            ),
            // Positioned menu overlay
            Positioned(
              top: position.dy + 60, // Position below the icon
              left: position.dx + 10,
              child: Material(
                color: Colors.transparent,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white
                        .withOpacity(0.95), // Slightly transparent background
                    borderRadius: BorderRadius.circular(12),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black26,
                        blurRadius: 10,
                        offset: Offset(0, 4), // Shadow under the menu
                      ),
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      _buildMenuItem('Home', Icons.home, _showHomeDialog),
                      _buildDivider(),
                      _buildMenuItem(
                          'Profile', Icons.person, _showProfileDialog),
                      _buildDivider(),
                      _buildMenuItem(
                          'Settings', Icons.settings, _showSettingsDialog),
                      _buildDivider(),
                      _buildMenuItem('Logout', Icons.logout, _showLogoutDialog),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      );
      Overlay.of(context).insert(_menuOverlay!);
    } else {
      _removeMenuOverlay();
    }
  }

  void _removeMenuOverlay() {
    _menuOverlay?.remove();
    _menuOverlay = null;
  }

  Widget _buildMenuItem(String text, IconData icon, VoidCallback onTap) {
    return InkWell(
      onTap: () {
        _removeMenuOverlay();
        onTap(); // Open the specific dialog for this menu item
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Row(
          children: [
            Icon(icon, size: 24, color: Colors.blueAccent),
            const SizedBox(width: 12),
            Text(
              text,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDivider() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Divider(
        color: Colors.grey.shade300,
        thickness: 1,
        height: 1,
      ),
    );
  }

  // Dialog for "Home" option
  void _showHomeDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Home'),
          content: Text('This is the Home dialog. Add your home content here.'),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('Close'),
            ),
          ],
        );
      },
    );
  }

  // Dialog for "Profile" option
  void _showProfileDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Profile'),
          content: Text(
              'This is the Profile dialog. Add your profile content here.'),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('Close'),
            ),
          ],
        );
      },
    );
  }

  // Dialog for "Settings" option
  void _showSettingsDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Settings'),
          content: Text(
              'This is the Settings dialog. Add your settings content here.'),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('Close'),
            ),
          ],
        );
      },
    );
  }

  // Dialog for "Logout" option
  void _showLogoutDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Logout'),
          content: Text('Are you sure you want to log out?'),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                // Add your logout functionality here
                Navigator.of(context).pop();
              },
              child: Text('Logout', style: TextStyle(color: Colors.red)),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggleMenuOverlay,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Image.asset(
          'assets/logo.png', // Your custom icon path
          height: 40,
          width: 40,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _removeMenuOverlay();
    super.dispose();
  }
}