import 'package:mc_common_app/models/user_models/image_response.dart';
import 'package:mc_common_app/view_models/dashboard_view_model_customer.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:mc_common_app/classes/app_state.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/config/routes.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/utils/utils.dart';
import 'package:mc_common_app/widgets/button/show_fill_button.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';

class CustomDrawer extends StatefulWidget {
  final DashboardVmCustomer dashboardVM;

  const CustomDrawer({Key? key, required this.dashboardVM}) : super(key: key);

  @override
  State<CustomDrawer> createState() => _CustomDrawerState();
}

class _CustomDrawerState extends State<CustomDrawer> {
  void _openImagePicker() {
    showDialog<ImageSource>(
      context: context,
      builder: (context) => AlertDialog(
        content: const Text("Choose image source"),
        actions: [
          TextButton(child: const Text("Camera"), onPressed: () => widget.dashboardVM.pickImageFromPhone(context, 0)),
          TextButton(child: const Text("Gallery"), onPressed: () => widget.dashboardVM.pickImageFromPhone(context, 1)),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: [
          Stack(
            children: [
              Container(
                width: double.infinity,
                height: 200,
                color: MyColors.darkPrimaryColor.withOpacity(0.01),
                child: Image.network(
                  ApiConsts.baseUrlServices + AppState().getUser.data!.userInfo!.userImageUrl.toString(),
                ),
              ),
              Positioned(
                top: 10,
                right: 10,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Column(
                      children: [
                        Container(
                          width: 40,
                          height: 40,
                          decoration: BoxDecoration(
                            color: Colors.grey[200],
                            borderRadius: BorderRadius.circular(30),
                          ),
                          child: const Icon(
                            Icons.edit,
                            color: MyColors.darkPrimaryColor,
                          ).onPress(() {
                            _openImagePicker();
                            //  _handleURLButtonPress(context, ImageSourceType.camera);
                          }),
                        ),
                        12.height,
                        Container(
                          width: 40,
                          height: 40,
                          decoration: BoxDecoration(
                            color: Colors.grey[200],
                            borderRadius: BorderRadius.circular(30),
                          ),
                          child: const Icon(
                            Icons.delete,
                            color: Colors.red,
                          ).onPress(() async {
                            Utils.showLoading(context);
                            ImageResponse response = await widget.dashboardVM.updateUserImage("");
                            if (response.messageStatus == 1) {
                              Utils.showToast("Image is Deleted");
                              setState(() {
                                AppState().getUser.data!.userInfo!.userImageUrl = response.data;
                              });
                            }
                            Utils.hideLoading(context);
                          }),
                        ),
                      ],
                    ),
                  ],
                ),
              )
            ],
          ),
          Container(
            width: double.infinity,
            color: MyColors.darkPrimaryColor.withOpacity(0.1),
            padding: const EdgeInsets.all(20),
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      "userName".toText(
                        isBold: true,
                        fontSize: 20,
                        letterSpacing: -1.44,
                      ),
                      AppState().getUser.data!.userInfo!.roleName!.toText(fontSize: 10),
                    ],
                  ),
                ),
                ShowFillButton(
                  title: LocaleKeys.edit.tr(),
                  fontSize: 12,
                  maxHeight: 35,
                  maxWidth: 70,
                  onPressed: () {
                    navigateWithName(context, AppRoutes.editAccountPage);
                  },
                ),
              ],
            ),
          ),
          ListTile(
            leading: const Icon(
              Icons.notifications,
              color: MyColors.darkPrimaryColor,
            ),
            title: LocaleKeys.notifications.tr().toText(fontSize: 12),
          ),
          ListTile(
            leading: const Icon(
              Icons.settings,
              color: MyColors.darkPrimaryColor,
            ),
            title: LocaleKeys.general.tr().toText(fontSize: 12),
          ),
          ListTile(
            leading: const Icon(
              Icons.person,
              color: MyColors.darkPrimaryColor,
            ),
            title: LocaleKeys.account.tr().toText(fontSize: 12),
          ),
          ListTile(
            leading: Image.asset(
              MyAssets.icWorldPng,
              width: 20,
              height: 20,
              color: MyColors.darkPrimaryColor,
            ),
            title: LocaleKeys.english.tr().toText(fontSize: 12),
            onTap: () {
              if (EasyLocalization.of(context)?.currentLocale?.countryCode == "SA") {
                context.setLocale(const Locale("en", "US"));
              } else {
                context.setLocale(const Locale('ar', 'SA'));
              }
            },
          ),
          ListTile(
            leading: const Icon(
              Icons.logout,
              color: MyColors.darkPrimaryColor,
            ),
            title: LocaleKeys.signOut.tr().toText(fontSize: 12),
            onTap: () {
              pop(context);
              navigateReplaceWithName(context, AppRoutes.registerSelection);
            },
          ),
        ],
      ),
    );
  }
}