import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/views/app_style/colors.dart';
import 'package:test_sa/views/app_style/sizing.dart';
import 'package:test_sa/views/pages/user/notifications/notifications_page.dart';

import '../../controllers/providers/api/user_provider.dart';
import '../../controllers/providers/settings/setting_provider.dart';
import '../../views/pages/user/profile_page.dart';
import '../../views/widgets/dialogs/dialog.dart';
import '../pages/settings_page.dart';

class AppDrawer extends StatelessWidget {
  const AppDrawer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final settingProvider = Provider.of<SettingProvider>(context, listen: false);
    final userProvider = Provider.of<UserProvider>(context, listen: false);
    return Drawer(
      width: MediaQuery.of(context).size.width * .8,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Consumer<UserProvider>(builder: (context, snapshot, _) {
                return CircleAvatar(
                  radius: 45,
                  backgroundColor: const Color(0xFFE4E5E6),
                  child: Padding(
                    padding: const EdgeInsets.all(1), // Border radius
                    child: ClipOval(
                      child: (snapshot.user.profilePhotoName?.isNotEmpty ?? false)
                          ? Image.network(snapshot.user.profilePhotoName)
                          : snapshot.profileImage != null
                              ? Image.file(snapshot.profileImage)
                              : const Icon(
                                  Icons.person,
                                  size: 50,
                                  color: Colors.white,
                                ),
                    ),
                  ),
                );
              }).onPress(() => Navigator.of(context).pushNamed(ProfilePage.id)),
              const Icon(Icons.clear).onPress(() => Navigator.of(context).pop())
            ],
          ),
          8.height,
          (userProvider.user?.username ?? "").heading3(context).custom(fontWeight: FontWeight.w600),
          if ((userProvider.user?.email ?? "").isNotEmpty) (userProvider.user?.email).heading6(context).custom(color: context.isDark ? AppColor.neutral10 : AppColor.neutral20),
          18.height,
          1.divider,
          ListView(
            // "settings" : " Settings",
            // "ReportBug " : "Report a bug",
            // "whatsNew" : "What's New",
            // "logout" : "Logout"

            // "settings" : " الاعدادات",
            // "ReportBug " "ابلاغ عن خطا",
            // "whatsNew" : "ماهو الجديد",
            // "logout" : "خروج"
            padding: const EdgeInsets.only(top: 24),
            children: [
              drawerItem("drawer_notification", context.translation.notifications, context).onPress(() => Navigator.of(context).pushNamed(NotificationsPage.id)),
              18.height,
              drawerItem("help_center", context.translation.helpCenter, context) /*.onPress(() => Navigator.of(context).pushNamed(HelpCenterPage.id))*/,
              18.height,
              drawerItem("rate_us", context.translation.rateUs, context),
              18.height,
              drawerItem("setting", context.translation.settings, context).onPress(() => Navigator.of(context).pushNamed(SettingsPage.id)),
              18.height,
              drawerItem("report", context.translation.reportBg, context) /*.onPress(() => Navigator.of(context).pushNamed(ReportBugPage.id))*/,
              18.height,
              drawerItem("whats_new", context.translation.whatsNew, context),
            ],
          ).expanded,
          drawerItem("logout", context.translation.logout, context, color: AppColor.red50).onPress(() async {
            bool result = await showDialog(
              context: context,
              builder: (_) => AAlertDialog(title: context.translation.signOut, content: context.translation.logoutAlert),
            );
            if (result ?? false) {
              settingProvider.resetSettings();
              userProvider.reset();
              Navigator.of(context).pop();
              Navigator.of(context).pop();
              Navigator.of(context).pop();
            }
          }),
          18.height,
          1.divider,
          18.height,
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Powered By Cloud Solutions",
                style: Theme.of(context).textTheme.headline6.copyWith(fontWeight: FontWeight.w500, color: context.isDark ? AppColor.neutral10 : AppColor.neutral50, fontSize: 12),
                textScaleFactor: AppStyle.getScaleFactor(context),
              ),
              6.width,
              Image.asset("assets/images/cloud_logo.png", width: 32, height: 32)
            ],
          )
        ],
      ).paddingOnly(top: 66, start: 16, end: 24, bottom: 18),
    );
  }

  Widget drawerItem(String icon, String title, BuildContext context, {Color color}) {
    return Row(
      children: [
        SvgPicture.asset(
          "assets/images/$icon.svg",
          color: color ?? const Color(0xFF757575),
          width: 24,
          height: 24,
        ),
        16.width,
        Text(
          title,
          style: AppTextStyles.heading6.copyWith(
            color: context.isDark ? AppColor.neutral10 : AppColor.neutral50,
          ),
        ),
      ],
    );
  }
}