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 '../../models/enums/translation_keys.dart';
import 'app_filled_button.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: [
              Container(
                width: 90,
                height: 90,
                decoration: const ShapeDecoration(
                  image: DecorationImage(
                    image: NetworkImage(
                        "https://www.shutterstock.com/shutterstock/photos/1714666150/display_1500/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg"),
                    fit: BoxFit.cover,
                  ),
                  shape: OvalBorder(
                    side: BorderSide(width: 1, color: Color(0xFFE4E5E6)),
                  ),
                ),
              ),
              Icon(Icons.clear).onPress(() => Navigator.of(context).pop())
            ],
          ),
          8.height,
          Text(
            "Eng Mahmoud",
            style: AppTextStyles.heading2.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50, fontWeight: FontWeight.w600, letterSpacing: -0.12),
          ),
          Text(
            "context.welcome@gmail.com",
            style: AppTextStyles.heading6.copyWith(color: context.isDark ? AppColor.neutral10 : AppColor.neutral20),
          ),
          18.height,
          1.divider,
          ListView(
            padding: EdgeInsets.only(top: 24),
            children: [
              drawerItem("drawer_notification", "Notification").onPress(() => Navigator.of(context).pushNamed(NotificationsPage.id)),
              18.height,
              drawerItem("help_center", "Help Center"),
              18.height,
              drawerItem("rate_us", "Rate Us"),
              18.height,
              drawerItem("setting", "Settings"),
              18.height,
              drawerItem("report", "Report a bug"),
              18.height,
              drawerItem("whats_new", "What's New"),
            ],
          ).expanded,
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text("Dark"),
              Switch.adaptive(
                value: context.isDark,
                onChanged: (value) {
                  settingProvider.setDarkTheme(value);
                },
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text("Arabic"),
              Switch.adaptive(
                value: settingProvider.language == "ar",
                onChanged: (value) {
                  settingProvider.setLanguage(value ? "ar" : "en");
                },
              ),
            ],
          ),
          drawerItem("logout", "Logout", color: AppColor.red50).onPress(() {
            /// TODO [zaid] : show dialog before logout
            // bool result = await showDialog(
            //   context: context,
            //   builder: (_) => const AAlertDialog(
            //     title: "_subtitle.signOut",
            //     content: "_subtitle.signOutAlert",
            //   ),
            // );
            if (true) {
              settingProvider.resetSettings();
              userProvider.reset();
              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: AColors.grey3A, 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, {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: color ?? const Color(0xFF3B3D4A)),
        ),
      ],
    );
  }
}