import 'package:external_repos/external_repos.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:uae_stat/config/my_theme.dart';
import 'package:uae_stat/domain/use_cases/auth_use_case.dart';
import 'package:uae_stat/domain/use_cases/language.dart';
import 'package:uae_stat/domain/use_cases/user_use_case.dart';
import 'package:uae_stat/infrastructure/services/img_asset_paths/icons/drawer_asset_icon_path.dart';
import 'package:uae_stat/infrastructure/services/img_asset_paths/logo_asset_path.dart';
import 'package:uae_stat/infrastructure/services/packages/list.dart';
import 'package:uae_stat/presentation/components/ref_watch_handled.dart';
import 'package:uae_stat/presentation/components/space.dart';

class MyDrawer extends ConsumerWidget {
  const MyDrawer({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final logo = Image.asset(
      LogoAssetPath.fcsc,
      height: 40,
      width: 40,
    );
    final profileBody = RefWatchHandled(
      userUseCaseProvider,
      onError: (error, stackTrace) => Center(
        child: Padding(
          padding: const EdgeInsets.all(12),
          child: Column(
            children: [
              const Text(
                'Error. Trying again in 10 seconds',
              ),
              12.verticalSpace,
              ElevatedButton(
                onPressed: ref
                    .read(
                      authUseCaseProvider.notifier,
                    )
                    .logout,
                child: const Text('Logout'),
              ),
            ],
          ),
        ),
      ),
      onData: (user) {
        if (user == null) {
          return ListTile(
            onTap: () => context.go('/${context.language}/login'),
            contentPadding: const EdgeInsets.symmetric(
              vertical: 12,
              horizontal: 24,
            ),
            leading: const CircleAvatar(
              radius: 18,
              child: Icon(Icons.person),
            ),
            title: Text(
              context.translate(
                'Login',
                'تسجيل الدخول',
              ),
              style: TextStyle(
                fontFamily: context.translate(
                  'Roboto',
                  'NotoKufi',
                ),
                fontSize: 14,
              ),
            ),
          );
        }
        return InkWell(
          onTap: () {
            Scaffold.of(context).closeDrawer();
            context.go('/${context.language}/profile');
          },
          child: Padding(
            padding: const EdgeInsetsDirectional.fromSTEB(
              20,
              20,
              28,
              20,
            ),
            child: Row(
              children: [
                CircleAvatar(
                  radius: 18,
                  backgroundColor: MyTheme.topicColor(IndicatorTopic.economy),
                  foregroundColor: Colors.white,
                  child: user.imgUrl != null
                      ? Image.network(user.imgUrl!)
                      : const Icon(Icons.person),
                ),
                24.horizontalSpace,
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        user.name,
                        style: TextStyle(
                          fontSize: 14,
                          fontFamily: context.translate(
                            'Inter',
                            'NotoKufi',
                          ),
                        ),
                      ),
                      Text(
                        user.email,
                        style: TextStyle(
                          fontSize: 12,
                          fontFamily: context.translate(
                            'Inter',
                            'NotoKufi',
                          ),
                          fontWeight: FontWeight.w300,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
    final profileBtn = profileBody;
    final selectedDrawerItem = DrawerItems.values.firstWhereOrNull(
      (e) =>
          GoRouterState.of(context).fullPath!.split('/').elementAt(2) ==
          e.routePath,
    );
    final menuBtns = Column(
      children: DrawerItems.values
          .map(
            (e) => InkWell(
              onTap: () {
                Scaffold.of(context).closeDrawer();
                if (e != selectedDrawerItem) {
                  context.go('/${context.language}/${e.routePath}');
                }
              },
              child: Material(
                color: Colors.transparent,
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 28,
                    vertical: 16,
                  ),
                  child: Row(
                    children: [
                      Image.asset(
                        e.imgPath,
                        height: 20,
                        width: 20,
                        color: e == selectedDrawerItem
                            ? const Color(0xff898C81)
                            : const Color(0xff343330),
                      ),
                      12.horizontalSpace,
                      Expanded(
                        child: Text(
                          context.translate(
                            e.titleEN,
                            e.titleAR,
                          ),
                          style: TextStyle(
                            fontFamily: context.translate(
                              'Inter',
                              'NotoKufi',
                            ),
                            fontSize: 14,
                            color: e == selectedDrawerItem
                                ? const Color(0xff898C81)
                                : const Color(0xff343330),
                          ),
                        ),
                      ),
                      if (e == selectedDrawerItem)
                        const Icon(
                          CupertinoIcons.left_chevron,
                          size: 12,
                        ),
                    ],
                  ),
                ),
              ),
            ),
          )
          .toList(),
    );
    return Drawer(
      backgroundColor: Colors.white,
      surfaceTintColor: Colors.white,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.horizontal(
          right: Radius.circular(30),
        ),
      ),
      child: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(
                vertical: 12,
                horizontal: 26,
              ),
              child: logo,
            ),
            const Divider(height: 0),
            profileBtn,
            const Divider(height: 0),
            Padding(
              padding: const EdgeInsetsDirectional.symmetric(
                vertical: 16,
              ),
              child: menuBtns,
            ),
          ],
        ),
      ),
    );
  }
}

enum DrawerItems {
  favorites(
    routePath: 'my-favorites',
    titleEN: 'My Favorites',
    titleAR: 'المفضلات',
    imgPath: DrawerAssetIconPath.favorites,
  ),
  manageuser(
    routePath: 'manageuser',
    titleEN: 'Manage User',
    titleAR: 'شاركنا رأيك',
    imgPath:  DrawerAssetIconPath.manageuser,
  ),
  feedback(
    routePath: 'feedback',
    titleEN: 'Feedback',
    titleAR: 'شاركنا رأيك',
    imgPath: DrawerAssetIconPath.message,
  ),
  privacyPolicy(
    routePath: 'privacy-policy',
    titleEN: 'Terms & Privacy Policy',
    titleAR: 'الشروط وسياسة الخصوصية',
    imgPath: DrawerAssetIconPath.scroll,
  );

   const DrawerItems({
    required this.routePath,
    required this.titleEN,
    required this.titleAR,
    required this.imgPath,
  });

// [
  //   DrawerAssetIconPath.bell,
  //   context.translate(
  //     'Notification',
  //     'إشعار',
  //   ),
  //   '/notifications',
  // ],
  // [
  //   DrawerAssetIconPath.book,
  //   context.translate(
  //     'User Guide',
  //     'دليل المستخدم',
  //   ),
  //   '/user-guide',
  // ],
  final String routePath;
  final String titleEN;
  final String titleAR;
  final String imgPath;
}