import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/providers/api/user_provider.dart';
import 'package:test_sa/controllers/providers/settings/setting_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/models/user.dart';
import 'package:test_sa/new_views/common_widgets/app_filled_button.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';
import 'package:test_sa/views/pages/user/update_user_contact_info_bottomsheet.dart';

import '../../../new_views/app_style/app_color.dart';

class ProfilePage extends StatefulWidget {
  static const String id = "/user/profile";

  const ProfilePage({Key? key}) : super(key: key);

  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  late UserProvider _userProvider;
  late SettingProvider _settingProvider;
  late double _width;
  late double _height;
  User _user = User();
  bool _firstTime = true;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    _userProvider = Provider.of<UserProvider>(context);
    _settingProvider = Provider.of<SettingProvider>(context);
    _width = MediaQuery.of(context).size.width;
    _height = MediaQuery.of(context).size.height;

    if (_firstTime) {
      _user = User.fromJsonCons(_userProvider.user!.toJson());
      _firstTime = false;
    }
    Color color = context.isDark ? AppColor.neutral10 : AppColor.neutral50;
    return Scaffold(
      key: _scaffoldKey,
      appBar: DefaultAppBar(title: context.translation.myProfile),
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.all(16),
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  width: double.infinity,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Consumer<UserProvider>(builder: (context, snapshot, _) {
                        return Stack(
                          alignment: Alignment.bottomRight,
                          children: [
                            CircleAvatar(
                              radius: 45,
                              backgroundColor: const Color(0xFFE4E5E6),
                              child: Padding(
                                padding: const EdgeInsets.all(1), // Border radius
                                child: ClipOval(
                                  child: snapshot.profileImage != null
                                      ? Image.file(snapshot.profileImage!)
                                      : (snapshot.user!.profilePhotoName?.isNotEmpty ?? false)
                                          ? Image.network(snapshot.user!.profilePhotoName!)
                                          : const Icon(
                                              Icons.person,
                                              size: 50,
                                              color: Colors.white,
                                            ),
                                ),
                              ),
                            ),
                            CircleAvatar(
                              radius: 14,
                              backgroundColor: AppColor.primary70,
                              child: Padding(
                                padding: const EdgeInsets.all(1), // Border radius
                                child: snapshot.isLoading
                                    ? const SizedBox(height: 16, width: 16, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
                                    : const Icon(Icons.upload, size: 16, color: Colors.white),
                              ),
                            ).onPress(snapshot.isLoading
                                ? null
                                : () async {
                                    final pickedFile = await ImagePicker().pickImage(source: ImageSource.gallery, imageQuality: 70, maxWidth: 800, maxHeight: 800);

                                    if (pickedFile != null) {
                                      CroppedFile? croppedFile = await ImageCropper().cropImage(
                                        sourcePath: pickedFile.path,
                                        aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1),
                                        uiSettings: [
                                          AndroidUiSettings(
                                            toolbarTitle: 'ATOMS',
                                            toolbarColor: Colors.white,
                                            toolbarWidgetColor: color,
                                            initAspectRatio: CropAspectRatioPreset.square,
                                            lockAspectRatio: false,
                                          ),
                                          IOSUiSettings(title: 'ATOMS'),
                                        ],
                                      );
                                      if (croppedFile != null) {
                                        await snapshot.uploadProfileImage(_user.userID!, File(croppedFile.path));
                                        Provider.of<SettingProvider>(context, listen: false).setUser(_userProvider.user!);
                                      }
                                    }
                                  }),
                          ],
                        );
                      }),
                      8.height,
                      (_user.username ?? "").heading3(context).custom(fontWeight: FontWeight.w600, color: context.isDark ? AppColor.neutral10 : AppColor.neutral50),
                    ],
                  ),
                ),
                16.height,
                Text(
                  '${context.translation.email}: ${_user.email ?? "-"}',
                  style: AppTextStyles.bodyText.copyWith(color: context.isDark ? AppColor.neutral10 : AppColor.neutral120),
                ),
                Text(
                  '${context.translation.phoneNumber}: ${_user.phoneNumber ?? "-"}',
                  style: AppTextStyles.bodyText.copyWith(color: context.isDark ? AppColor.neutral10 : AppColor.neutral120),
                ),
                Text(
                  '${context.translation.extensionNo}: ${_user.extensionNo ?? "-"}',
                  style: AppTextStyles.bodyText.copyWith(color: context.isDark ? AppColor.neutral10 : AppColor.neutral120),
                ),

                // if ((_user.phoneNumber ?? "").isNotEmpty) ...[
                //   const Divider().defaultStyle(context),
                //   8.height,
                //   (_user.phoneNumber??"").heading5(context),
                //   8.height,
                // ],
                // if ((_user.extensionNo ?? "").isNotEmpty) ...[
                //   const Divider().defaultStyle(context),
                //   8.height,
                //   _user.extensionNo!.heading5(context),
                //   8.height,
                // ],
                if ((_user.departmentName?.length ?? 0) > 0) const Divider().defaultStyle(context),
                ListView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: _user.departmentName?.length ?? 0,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return (_user.departmentName![index] ?? "N/A").heading5(context).paddingOnly(top: 8, bottom: 8);
                  },
                ),
                if ((_user.clientName ?? "").isNotEmpty) ...[
                  const Divider().defaultStyle(context),
                  8.height,
                  _user.clientName!.heading5(context).custom(color: context.isDark ? AppColor.neutral10 : AppColor.neutral50),
                  8.height,
                ],
              ],
            ).toShadowContainer(context),
            16.height,
            AppFilledButton(
              label: "Update Information",
              buttonColor: context.isDark ? AppColor.primary10 : AppColor.neutral50,
              onPressed: () {
                context.showBottomSheet(
                    UpdateUserContactInfoBottomSheet(
                      _userProvider.user!.userID!,
                      uEmail: _user.email,
                      uPhoneNo: _user.phoneNumber,
                      uExtensionNo: _user.extensionNo,
                      onUpdate: (email, phoneNo, extensionNo) {
                        _userProvider.user!.email = email;
                        _userProvider.user!.phoneNumber = phoneNo;
                        _userProvider.user!.extensionNo = extensionNo;
                        _firstTime = true;
                        Provider.of<SettingProvider>(context, listen: false).setUser(_userProvider.user!);
                      },
                    ),
                    title: "Update Information");
              },
            )
          ],
        ),
        // child: Stack(
        //   children: [
        //     Form(
        //       key: _formKey,
        //       child: ListView(
        //         children: [
        //           //AppNameBar(),
        //           Hero(
        //             tag: "logo",
        //             child: Image(
        //               height: _height / 4,
        //               image: AssetImage("assets/images/logo.png"),
        //             ),
        //           ),
        //           Container(
        //             padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
        //             margin: EdgeInsets.symmetric(horizontal: 16),
        //             decoration: BoxDecoration(color: AColors.primaryColor, borderRadius: BorderRadius.circular(AppStyle.getBorderRadius(context)), boxShadow: [
        //               BoxShadow(
        //                 color: AColors.grey,
        //                 offset: Offset(0, -1),
        //               )
        //             ]),
        //             child: Column(
        //               children: [
        //                 ATextFormField(
        //                   initialValue: _user.userName,
        //                   hintText: context.translation.name,
        //                   enable: false,
        //                   prefixIconData: Icons.account_circle,
        //                   style: Theme.of(context).textTheme.headline6,
        //                   validator: (value) => Validator.hasValue(value) ? null : context.translation.nameValidateMessage,
        //                   onSaved: (value) {
        //                     _user.userName = value;
        //                   },
        //                 ),
        //                 SizedBox(
        //                   height: 8,
        //                 ),
        //                 ATextFormField(
        //                   initialValue: _user.email,
        //                   hintText: context.translation.email,
        //                   enable: false,
        //                   prefixIconData: Icons.email,
        //                   textInputType: TextInputType.emailAddress,
        //                   style: Theme.of(context).textTheme.headline6,
        //                   validator: (value) => Validator.isEmail(value) ? null : context.translation.emailValidateMessage,
        //                   onSaved: (value) {
        //                     _user.email = value;
        //                   },
        //                 ),
        //                 SizedBox(
        //                   height: 8,
        //                 ),
        //                 AbsorbPointer(
        //                   child: HospitalButton(
        //                     hospital: Hospital(name: _user.clientName, id: _user.clientId),
        //                     onHospitalPick: (hospital) {
        //                       _user.clientName = hospital.name;
        //                       _user.clientId = hospital.id;
        //                       setState(() {});
        //                     },
        //                   ),
        //                 ),
        //                 SizedBox(
        //                   height: 8,
        //                 ),
        //                 // DepartmentButton(
        //                 //   department: Department(name: _user.departmentName, id: _user.departmentId),
        //                 //   onDepartmentPick: (department) {
        //                 //     _user.departmentName = department.name;
        //                 //     _user.departmentId = department.id;
        //                 //     setState(() {});
        //                 //   },
        //                 // ),
        //                 SizedBox(
        //                   height: 8,
        //                 ),
        //                 ATextFormField(
        //                   initialValue: _user.phoneNumber,
        //                   hintText: context.translation.phoneNumber,
        //                   style: Theme.of(context).textTheme.headline6,
        //                   prefixIconData: Icons.phone_android,
        //                   validator: (value) => Validator.isPhoneNumber(value) ? null : context.translation.phoneNumberValidateMessage,
        //                   textInputType: TextInputType.phone,
        //                   onSaved: (value) {
        //                     _user.phoneNumber = value;
        //                   },
        //                 ),
        //                 SizedBox(
        //                   height: 8,
        //                 ),
        //                 // ATextFormField(
        //                 //   initialValue: _user.whatsApp,
        //                 //   hintText: context.translation.whatsApp,
        //                 //   style: Theme.of(context).textTheme.headline6,
        //                 //   prefixIconData: FontAwesomeIcons.whatsapp,
        //                 //   prefixIconSize: 36,
        //                 //   validator: (value) =>
        //                 //   Validator.isPhoneNumber(value) ? null : context.translation.phoneNumberValidateMessage,
        //                 //   textInputType: TextInputType.phone,
        //                 //   onSaved: (value){
        //                 //     _user.whatsApp = value;
        //                 //   },
        //                 // ),
        //               ],
        //             ),
        //           ),
        //           SizedBox(
        //             height: 16,
        //           ),
        //           Center(
        //             child: SizedBox(
        //               height: _width / 8,
        //               width: _width / 1.2,
        //               child: AButton(
        //                 text: context.translation.update,
        //                 onPressed: () async {
        //                   // if (!_formKey.currentState.validate()) return;
        //                   // _formKey.currentState.save();
        //                   // if (_user.departmentId == null) {
        //                   //   ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        //                   //     content: Text(context.translation.unitRequired),
        //                   //   ));
        //                   //   return;
        //                   // }
        //                   // int status = await _userProvider.updateProfile(
        //                   //   user: _user,
        //                   //   host: _settingProvider.host,
        //                   // );
        //                   // if (status >= 200 && status < 300) {
        //                   //   _settingProvider.setUser(_userProvider.user);
        //                   //   ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        //                   //     content: Text(context.translation.requestCompleteSuccessfully),
        //                   //   ));
        //                   // } else {
        //                   //   String errorMessage = HttpStatusManger.getStatusMessage(status: status, subtitle: context.translation);
        //                   //   ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        //                   //     content: Text(errorMessage),
        //                   //   ));
        //                   // }
        //                 },
        //               ),
        //             ),
        //           ),
        //           SizedBox(
        //             height: 32,
        //           ),
        //         ],
        //       ),
        //     ),
        //     ABackButton(),
        //   ],
        // ),
      ),
    );
  }
}