import 'dart:ui';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.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/view_models/user_view_model.dart';
import 'package:mc_common_app/views/setting_options/widgets/custom_setting_options_tile.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';
import 'package:easy_localization/easy_localization.dart';

class ProfileScreen extends StatefulWidget {
  const ProfileScreen({Key? key}) : super(key: key);

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  late UserVM userVM;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    userVM = Provider.of<UserVM>(context, listen: false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      backgroundColor: const Color(0xffefefef),
      body: Consumer<UserVM>(builder: (_, model, __) {
        return Stack(
          children: [
            Column(
              children: [
                Expanded(
                  flex: 3,
                  child: Container(
                    decoration: BoxDecoration(
                      image: AppState().getUser.data!.userInfo!.userLocalImage != null
                          ? DecorationImage(
                              image: FileImage(AppState().getUser.data!.userInfo!.userLocalImage!),
                              fit: BoxFit.cover,
                            )
                          : AppState().getUser.data!.userInfo!.userImageUrl != null
                              ? DecorationImage(
                                  image: CachedNetworkImageProvider(
                                    AppState().getUser.data!.userInfo!.userImageUrl,
                                  ),
                                  fit: BoxFit.cover,
                                )
                              : DecorationImage(
                                  image: AssetImage(
                                    MyAssets.icLogoWhitePng,
                                  ),
                                ),
                    ),
                    child: BackdropFilter(
                      filter: ImageFilter.blur(sigmaX: 7.0, sigmaY: 7.0),
                      child: Container(
                        // height:,
                        color: Colors.white.withOpacity(0.0),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 8,
                  child: Container(
                    width: double.infinity,
                    color: Colors.white,
                    child: ListView(
                      children: [
                        20.height,
                        "${AppState().getUser.data!.userInfo!.firstName} ${AppState().getUser.data!.userInfo!.lastName ?? ""}".toText(fontSize: 20).paddingOnly(left: 25),
                        Column(
                          children: [
                            CustomProfileOptionsTile(
                              titleText: LocaleKeys.country.tr(),
                              subtitleText: "Saudi Arabia",
                              needBorderBelow: true,
                              onTap: () {},
                            ),
                            CustomProfileOptionsTile(
                              titleText: LocaleKeys.email.tr(),
                              subtitleText: "${AppState().getUser.data!.userInfo!.email}",
                              needBorderBelow: true,
                              onTap: () {
                                Navigator.pushNamed(context, AppRoutes.changeEmailPage);
                              },
                            ),
                            CustomProfileOptionsTile(
                              titleText: LocaleKeys.phoneNumber.tr(),
                              subtitleText: "${AppState().getUser.data!.userInfo!.email}",
                              needBorderBelow: true,
                              onTap: () {
                                Navigator.pushNamed(context, AppRoutes.changeMobilePage);
                              },
                            ),
                            CustomProfileOptionsTile(
                              titleText: LocaleKeys.password.tr(),
                              subtitleText: "************",
                              onTap: () {
                                Navigator.pushNamed(context, AppRoutes.changePassword);
                              },
                            ),
                          ],
                        ).toContainer(width: double.infinity, isShadowEnabled: true, paddingAll: 10, margin: const EdgeInsets.fromLTRB(24, 20, 24, 0), borderRadius: 0),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Positioned(
              top: MediaQuery.of(context).size.height * 0.25,
              child: Container(
                height: 90,
                alignment: Alignment.centerLeft,
                child: ClipOval(
                  child: AppState().getUser.data!.userInfo!.userLocalImage != null
                      ? Image.file(
                          AppState().getUser.data!.userInfo!.userLocalImage!,
                          width: 90,
                          height: 90,
                          fit: BoxFit.fill,
                        )
                      : CachedNetworkImage(
                          imageUrl: "${AppState().getUser.data!.userInfo!.userImageUrl}",
                          imageBuilder: (context, imageProvider) => Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                image: imageProvider,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
                          errorWidget: (context, url, error) => const Icon(Icons.error),
                          width: 90,
                          height: 90,
                          fit: BoxFit.fill,
                          fadeInCurve: Curves.easeIn,
                          fadeInDuration: Duration(milliseconds: 1000),
                          useOldImageOnUrlChange: false,
                        ),
                ),
              ).horPaddingMain(),
            ),
            Positioned(
              top: MediaQuery.of(context).size.height * 0.30,
              right: MediaQuery.of(context).size.height * 0.036,
              child: Container(
                height: 35,
                width: 35,
                decoration: BoxDecoration(color: MyColors.white, shape: BoxShape.circle, border: Border.all(color: MyColors.darkTextColor, width: 0.1)),
                child: const Icon(Icons.edit_note, color: MyColors.darkIconColor, size: 27).paddingOnly(left: 5),
              ).onPress(
                () async {
                  model.updateUserImage(context);
                },
              ),
            ),
          ],
        );
      }),
    );
  }
}

//

//
