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/default_app_bar.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.fromJson(_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: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              width: double.infinity,
              child: Column(
                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),
                  if ((_user.email ?? "").isNotEmpty) (_user.email ?? "").heading6(context).custom(color: context.isDark ? AppColor.neutral10 : AppColor.neutral20),
                ],
              ),
            ),
            24.height,
            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).paddingAll(16),
        // 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(),
        //   ],
        // ),
      ),
    );
  }
}
