import 'package:wanisclient/config/custom_text.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:sidebarx/sidebarx.dart';

import '../config/constants/app_constant.dart';
import '../config/language/language_enum.dart';
import '../providers/authentification_provider.dart';
import '../providers/language_provider.dart';
import '../providers/utils_singleton.dart';
import '../utils/colors.dart';
import '../widgets/custom_button.dart';

class Sidebar extends StatelessWidget {
  const Sidebar({Key? key, required this.controller, required this.systembottompadding}) : super(key: key);

  final SidebarXController controller;
  final double systembottompadding;

  @override
  Widget build(BuildContext context) {
    final languageProvider = context.watch<LanguageProvider>();
    bool isArabic = languageProvider.currentLangCode == Language.ar;
    final authProvider = context.watch<AuthProvider>();
    return Drawer(
      backgroundColor: Colors.white,
      clipBehavior: Clip.none,
      child: Column(
        children: [
          const SizedBox(height: 32),
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(12),
            margin: const EdgeInsets.all(12),
            clipBehavior: Clip.antiAlias,
            decoration: ShapeDecoration(
              shape: RoundedRectangleBorder(
                side: BorderSide(color: Colors.black.withValues(alpha: 0.03)),
                borderRadius: BorderRadius.circular(12),
              ),
            ),
            child: Row(
              children: [
                ClipOval(
                  child: CachedNetworkImage(
                    imageUrl: '$mediaUrl${utils.user?.image?.url}',
                    width: 36,
                    height: 36,
                    fit: BoxFit.fill,
                    placeholder: (context, url) => const Center(
                      child: CircularProgressIndicator(),
                    ),
                    errorWidget: (context, url, error) => Image.asset(
                      "assets/images/wanislogo.png",
                      fit: BoxFit.cover,
                      width: 36,
                      height: 36,
                    ),
                  ),
                ),
                const SizedBox(width: 16),
                Text(
                  "${utils.user?.name}",
                  style: const TextStyle(
                    color: AppNewColors.titleTextColor,
                    fontSize: 16,
                    fontFamily: 'Inter', //"Readex_Pro"
                    fontWeight: FontWeight.w500,
                    height: 1.50,
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 56),
          // Menu items
          Expanded(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                _buildMenuItem(
                  context,
                  isArabic,
                  //icon: LucideIcons.helpCircle,
                  title: 'Payment history',
                  onTap: () {
                    controller.selectIndex(5);
                    Navigator.pop(context);
                  },
                ),

                _buildMenuItem(
                  context,
                  isArabic,
                  title: 'Schedule Rides',
                  onTap: () {
                    controller.selectIndex(6);
                    Navigator.pop(context);
                  },
                ),
                _buildMenuItem(
                  context,
                  isArabic,
                  title: 'About',
                  onTap: () {
                    controller.selectIndex(7);
                    Navigator.pop(context);
                  },
                ),
                _buildMenuItem(
                  context,
                  isArabic,
                  //icon: LucideIcons.helpCircle,
                  title: 'Support',
                  onTap: () {
                    controller.selectIndex(8);
                    Navigator.pop(context);
                  },
                ),

              ],
            ),
          ),
          Padding(
            padding:  const EdgeInsets.only(left: 15.0,right: 15.0,bottom:2),
            child: CustomButton(
              onClick: () async {
                await authProvider.logOut();
              },
              width: MediaQuery.of(context).size.width,
              fontSize: 14,
              height: 40,
              borderRadius: 10,
              title: isArabic ? 'تسجيل الخروج' : 'Log out',
              backgroundColor: AppNewColors.primaryColor,
              borderColor: AppNewColors.primaryColor,
              isloading: authProvider.logoutloading,
              loadercolor: AppNewColors.white,
            ),
          ),
          SizedBox(height: systembottompadding,)
        ],
      ),
    );
  }

  Widget _buildMenuItem(BuildContext context, isArabic,
      {required String title, required VoidCallback onTap}) {
    return ListTile(
        title: Txt(
          text: title,
          style: TextStyle(
            color: AppNewColors.grayTxtColor,
            fontSize: 18,
            fontFamily: isArabic ? 'Readex_Pro' : 'Inter',
            fontWeight: FontWeight.w500,
            height: 1.33,
          ),
        ),
        onTap: onTap);
  }
}

// class Sidebar extends StatelessWidget {
//   const Sidebar({Key? key, required this.controller}) : super(key: key);
//
//   final SidebarXController controller;
//
//   @override
//   Widget build(BuildContext context) {
//     final languageProvider = context.watch<LanguageProvider>();
//     bool isArabic = languageProvider.currentLangCode == Language.ar;
//     final authProvider = context.watch<AuthProvider>();
//     return Drawer(
//       backgroundColor: Colors.white,
//       clipBehavior: Clip.none,
//       child: Column(
//         children: [
//           // Header with user profile
//           // DrawerHeader(
//           //   padding: const EdgeInsets.fromLTRB(13.0, 8.0, 8.0, 8.0),
//           //   margin: const EdgeInsets.only(bottom: 4.0),
//           //   decoration: const BoxDecoration(color: Colors.white),
//           //   child: Row(
//           //     children: [
//           //       ClipOval(
//           //         child: CachedNetworkImage(
//           //           imageUrl: '$mediaUrl${utils.user?.image?.url}',
//           //           width: MediaQuery.sizeOf(context).width * 0.1,
//           //           height: MediaQuery.sizeOf(context).width * 0.1,
//           //           fit: BoxFit.fill,
//           //           placeholder: (context, url) => const Center(
//           //             child: CircularProgressIndicator(),
//           //           ),
//           //           errorWidget: (context, url, error) => Image.asset(
//           //             "assets/images/wanislogo.png",
//           //             fit: BoxFit.cover,
//           //             width: MediaQuery.sizeOf(context).width * 0.3,
//           //             height: MediaQuery.sizeOf(context).width * 0.3,
//           //           ),
//           //         ),
//           //       ),
//           //       const SizedBox(width: 16),
//           //       Text(
//           //         "${utils.user?.name}",
//           //         style: const TextStyle(
//           //             fontSize: 18,
//           //             fontWeight: FontWeight.bold,
//           //             color: AppColors.primaryColor),
//           //       ),
//           //     ],
//           //   ),
//           // ),
//
//           const SizedBox(height: 32),
//           Container(
//             width: double.infinity,
//             padding: const EdgeInsets.all(12),
//             margin: const EdgeInsets.all(12),
//             clipBehavior: Clip.antiAlias,
//             decoration: ShapeDecoration(
//               shape: RoundedRectangleBorder(
//                 side: BorderSide(
//                   color: Colors.black.withValues(alpha: 0.03)
//                 ),
//                 borderRadius: BorderRadius.circular(12),
//               ),
//             ),
//             child: Row(
//               children: [
//                 ClipOval(
//                   child: CachedNetworkImage(
//                     imageUrl: '$mediaUrl${utils.user?.image?.url}',
//                     width: 36,
//                     height: 36,
//                     fit: BoxFit.fill,
//                     placeholder: (context, url) => const Center(
//                       child: CircularProgressIndicator(),
//                     ),
//                     errorWidget: (context, url, error) => Image.asset(
//                       "assets/images/wanislogo.png",
//                       fit: BoxFit.cover,
//                       width: 36,
//                       height: 36,
//                     ),
//                   ),
//                 ),
//                 const SizedBox(width: 16),
//                 Text(
//                   "${utils.user?.name}",
//                   style: const TextStyle(
//                     color: AppNewColors.titleTextColor ,
//                     fontSize: 16,
//                     fontFamily: 'Inter',//"Readex_Pro"
//                     fontWeight: FontWeight.w500,
//                     height: 1.50,),
//                 ),
//               ],
//             ),
//           ),
//           const SizedBox(height: 56),
//           // Menu items
//           Expanded(
//             child: ListView(
//               padding: EdgeInsets.zero,
//               children: [
//                 _buildMenuItem(
//                   context,
//                   isArabic,
//                   icon: Icons.home,
//                   title: 'Home',
//                   onTap: () {
//                     controller.selectIndex(0);
//                     Navigator.pop(context);
//                   },
//                 ),
//                 // _buildMenuItem(
//                 //   context,
//                 //   isArabic,
//                 //   icon: Icons.notifications,
//                 //   title: 'Notifications',
//                 //   onTap: () {
//                 //     controller.selectIndex(1);
//                 //     Navigator.pop(context);
//                 //   },
//                 // ),
//                 _buildMenuItem(
//                   context,
//                   isArabic,
//                   icon: Icons.payment,
//                   title: 'Payment History',
//                   onTap: () {
//                     controller.selectIndex(2);
//                     Navigator.pop(context);
//                   },
//                 ),
//                 // _buildMenuItem(
//                 //   context,
//                 //   isArabic,
//                 //   icon: Icons.directions_car,
//                 //   title: 'My Rides',
//                 //   onTap: () {
//                 //     controller.selectIndex(3);
//                 //     Navigator.pop(context);
//                 //   },
//                 // ),
//                 // _buildMenuItem(
//                 //   context,
//                 //   isArabic,
//                 //   icon: Icons.schedule,
//                 //   title: 'Schedule Rides',
//                 //   onTap: () {
//                 //     controller.selectIndex(4);
//                 //     Navigator.pop(context);
//                 //   },
//                 // ),
//                 // _buildMenuItem(
//                 //   context,
//                 //   isArabic,
//                 //   icon: Icons.person,
//                 //   title: 'Profile',
//                 //   onTap: () {
//                 //     controller.selectIndex(5);
//                 //
//                 //     Navigator.pop(context);
//                 //   },
//                 // ),
//                 _buildMenuItem(
//                   context,
//                   isArabic,
//                   icon: Icons.info,
//                   title: 'About',
//                   onTap: () {
//                     controller.selectIndex(6);
//                     Navigator.pop(context);
//                   },
//                 ),
//                 _buildMenuItem(
//                   context,
//                   isArabic,
//                   icon: Icons.support,
//                   title: 'Support',
//                   onTap: () {
//                     controller.selectIndex(7);
//                     Navigator.pop(context);
//                   },
//                 ),
//               ],
//             ),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(15.0),
//             child: CustomButton(
//               onClick: () async {
//                 await authProvider.logOut();
//               },
//               width: MediaQuery.of(context).size.width,
//               fontSize: 14,
//               height: 40,
//               borderRadius: 10,
//               title: isArabic ? 'إرسال' : 'Log out',
//               backgroundColor: AppNewColors.primaryColor,
//               borderColor: AppNewColors.primaryColor,
//               isloading: authProvider.logoutloading,
//               loadercolor: AppNewColors.secondaryColor,
//             ),
//           ),
//         ],
//       ),
//     );
//   }
//
//   Widget _buildMenuItem(BuildContext context,isArabic,
//       {required IconData icon,
//       required String title,
//       required VoidCallback onTap}) {
//     return ListTile(
//         title: Txt(
//           text: title,
//           style:  TextStyle(
//             color: AppNewColors.grayTxtColor ,
//             fontSize: 18,
//             fontFamily: isArabic ? 'Readex_Pro':'Inter',
//             fontWeight: FontWeight.w500,
//             height: 1.33,
//           ),
//         ),
//         onTap: onTap);
//   }
// }