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/utils/navigator.dart';
import 'package:mc_common_app/view_models/user_view_model.dart';
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart';
import '../../theme/colors.dart';

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

  @override
  State<EditAccountPage> createState() => _EditAccountPageState();
}

class _EditAccountPageState extends State<EditAccountPage> {
  String userID = "";
  String email = '';

  @override
  Widget build(BuildContext context) {
    UserVM userVM = context.read<UserVM>();
    return Scaffold(
      appBar: CustomAppBar( isRemoveBackButton: true, title: LocaleKeys.editAccount.tr()),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            20.height,
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SvgPicture.asset(
                  MyAssets.icLock,
                  color: MyColors.darkPrimaryColor,
                  width: 16,
                ),
                20.width,
                Expanded(child: LocaleKeys.changePassword.tr().toText(isBold: true, fontSize: 12)),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    textStyle: const TextStyle(color: Colors.white),
                    backgroundColor: MyColors.darkPrimaryColor,
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                  ),
                  onPressed: () {
                    navigateWithName(context, AppRoutes.changePassword);
                  },
                  child: Text(
                    LocaleKeys.change.tr(),
                    style: const TextStyle(
                      fontSize: 14, letterSpacing: -0.48,
                      fontWeight: FontWeight.w600,
                      height: 23 / 24,
                    ),
                  ),
                ),
              ],
            ),
            15.height,
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SvgPicture.asset(
                  "assets/images/ic_mobile.svg",
                  color: MyColors.darkPrimaryColor,
                  width: 16,
                ),
                20.width,
                Expanded(child: LocaleKeys.changeMobile.tr().toText(isBold: true, fontSize: 12)),
                LocaleKeys.verify.tr().toText(color: Colors.green, fontSize: 12),
                20.width,
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    textStyle: const TextStyle(color: Colors.white),
                    backgroundColor: MyColors.darkPrimaryColor,
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                  ),
                  onPressed: () {
                    navigateWithName(context, AppRoutes.changeMobilePage);
                  },
                  child: Text(
                    LocaleKeys.change.tr(),
                    style: const TextStyle(fontSize: 14, height: 23 / 24,fontWeight: FontWeight.w600),
                  ),
                )
              ],
            ),
            20.height,
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SvgPicture.asset(
                  MyAssets.icEmail,
                  color: MyColors.darkPrimaryColor,
                  width: 16,
                ),
                20.width,
                Expanded(child: LocaleKeys.changeEmail.tr().toText(isBold: true, fontSize: 12)),
                InkWell(
                  child: ((AppState().getUser.data!.userInfo!.isEmailVerified ?? false) ? LocaleKeys.verified.tr() : LocaleKeys.verify.tr()).toText(
                    color: Colors.green,
                    fontSize: 12,
                  ),
                  onTap: (AppState().getUser.data!.userInfo!.isEmailVerified ?? false)
                      ? null
                      : () async {
                          await userVM.verifyEmail(context, email: email, userID: userID);
                        },
                ),
                20.width,
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    textStyle: const TextStyle(color: Colors.white),
                    backgroundColor: MyColors.darkPrimaryColor,
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                  ),
                  onPressed: () {
                    navigateWithName(context, AppRoutes.changeEmailPage);
                  },
                  child: Text(
                    LocaleKeys.change.tr(),
                    style: const TextStyle(fontSize: 14, height: 23 / 24, fontWeight: FontWeight.w600),
                  ),
                ),
              ],
            )

            // ListTile(
            //   leading: SvgPicture.asset("assets/images/ic_mobile.svg"),
            //   title: "Change Mobile".toText12(),
            //   onTap: () {
            //     navigateWithName(context, AppRoutes.changeMobilePage);
            //   },
            // ),
            // ListTile(
            //   leading: Icon(Icons.email_outlined, color: Colors.blue,),
            //   title: "Change Email".toText12(),
            //   onTap: () {
            //     navigateWithName(context, AppRoutes.changeEmailPage);
            //   },
            // ),
          ],
        ),
      ),
    );
  }
}
