import 'package:em2rp/providers/local_user_provider.dart';
import 'package:em2rp/utils/colors.dart';
import 'package:em2rp/views/calendar_page.dart';
import 'package:em2rp/views/my_account_page.dart';
import 'package:em2rp/views/user_management_page.dart';
import 'package:flutter/material.dart';
import 'package:em2rp/views/widgets/image/profile_picture.dart';
import 'package:provider/provider.dart';
import 'package:em2rp/utils/permission_gate.dart';
import 'package:em2rp/models/role_model.dart';

class MainDrawer extends StatelessWidget {
  final String currentPage;

  const MainDrawer({
    Key? key,
    required this.currentPage,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<LocalUserProvider>(
      builder: (context, userProvider, child) {
        final hasUser = userProvider.currentUser != null;

        return Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: const AssetImage('assets/EM2_NsurB.jpg'),
                    fit: BoxFit.cover,
                    colorFilter: ColorFilter.mode(
                      AppColors.noir.withOpacity(0.4),
                      BlendMode.darken,
                    ),
                  ),
                ),
                child: Container(
                  padding: const EdgeInsets.all(16.0),
                  alignment: Alignment.bottomLeft,
                  child: SingleChildScrollView(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        if (hasUser)
                          ProfilePictureWidget(
                            userId: userProvider.currentUser!.uid,
                            radius: 30,
                          )
                        else
                          const CircleAvatar(
                            radius: 30,
                            child: Icon(Icons.account_circle, size: 45),
                          ),
                        const SizedBox(height: 8),
                        Text(
                          hasUser
                              ? 'Bonjour, ${userProvider.currentUser!.firstName}'
                              : 'Bonjour, Utilisateur',
                          style: const TextStyle(
                            color: AppColors.blanc,
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            shadows: [
                              Shadow(
                                blurRadius: 3.0,
                                color: AppColors.noir,
                                offset: Offset(1.0, 1.0),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              ListTile(
                leading: const Icon(Icons.calendar_today),
                title: const Text('Calendrier'),
                selected: currentPage == '/calendar',
                selectedColor: AppColors.rouge,
                onTap: () {
                  Navigator.pop(context);
                  Navigator.pushReplacement(
                    context,
                    MaterialPageRoute(builder: (context) => const CalendarPage()),
                  );
                },
              ),
              ExpansionTileTheme(
                data: const ExpansionTileThemeData(
                  iconColor: AppColors.noir,
                  collapsedIconColor: AppColors.noir,
                ),
                child: ExpansionTile(
                  leading: const Icon(Icons.settings),
                  title: const Text('Paramètres'),
                  children: <Widget>[
                    ListTile(
                      leading: const Icon(Icons.account_circle),
                      title: const Text('Mon Compte'),
                      selected: currentPage == '/my_account',
                      selectedColor: AppColors.rouge,
                      onTap: () {
                        Navigator.pop(context);
                        Navigator.pushReplacement(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const MyAccountPage()),
                        );
                      },
                    ),
                    PermissionGate(
                      requiredPermissions: const [Permission.viewUsers],
                      child: ListTile(
                        leading: const Icon(Icons.group),
                        title: const Text('Gestion des Utilisateurs'),
                        selected: currentPage == '/user_management',
                        selectedColor: AppColors.rouge,
                        onTap: () {
                          Navigator.pop(context);
                          Navigator.pushReplacement(
                            context,
                            MaterialPageRoute(
                                builder: (context) =>
                                    const UserManagementPage()),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}