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/enums.dart';
import 'package:mc_common_app/utils/navigator.dart';
import 'package:mc_common_app/view_models/dashboard_view_model_customer.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/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:mc_common_app/widgets/extensions/extensions_widget.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(21),
        child: Column(
          children: [
            Column(
              children: [
                showItem(
                  icon: MyAssets.icEmail,
                  title: LocaleKeys.changeEmail.tr(),
                  onTap: () {
                    navigateWithName(context, AppRoutes.changeEmailPage);
                  },
                ),
                const Divider(
                  height: 1,
                ),
                showItem(
                  icon: MyAssets.icPassword,
                  title: LocaleKeys.changePassword.tr(),
                  onTap: () {
                    navigateWithName(context, AppRoutes.changePassword);
                  },
                ),
                const Divider(
                  height: 1,
                ),
                showItem(
                  icon: MyAssets.icPhoneNumber,
                  title: LocaleKeys.changeMobile.tr(),
                  onTap: () {
                    navigateWithName(context, AppRoutes.changeMobilePage);
                  },
                ),
                const Divider(
                  height: 1,
                ),
              ],
            ).toWhiteContainer(width: double.infinity, pading: EdgeInsets.symmetric(horizontal: 12)),
            Column(
              children: [
                CustomSettingOptionsTile(
                    leadingWidget: const Icon(Icons.quickreply_outlined, size: 20),
                    titleText: "Requests",
                    needBorderBelow: true,
                    onTap: () {
                      context.read<DashboardVmCustomer>().onNavbarTapped(4);
                      Navigator.pop(context);
                    }),
                CustomSettingOptionsTile(
                  leadingWidget: const Icon(Icons.settings, size: 20),
                  titleText: "Settings",
                  needBorderBelow: true,
                  onTap: () => navigateWithName(context, AppRoutes.settingOptionsInviteFriends),
                ),
                CustomSettingOptionsTile(
                  leadingWidget: const Icon(Icons.question_mark_outlined, size: 20),
                  titleText: "Help",
                  needBorderBelow: true,
                  onTap: () => navigateWithName(context, AppRoutes.settingOptionsInviteFriends),
                ),
                CustomSettingOptionsTile(
                    leadingWidget: const Icon(Icons.person, size: 20),
                    titleText: "Account",
                    needBorderBelow: false,
                    onTap: () {
                      context.read<DashboardVmCustomer>().onNavbarTapped(4);
                      Navigator.pop(context);
                    }),
              ],
            ).toWhiteContainer(width: double.infinity, pading: const EdgeInsets.all(12), borderRadius: 0),
            10.height,
            CustomSettingOptionsTile(
              leadingWidget: const Icon(Icons.translate, size: 20),
              titleText: "Language",
              isForLanguage: true,
              onTap: () {},
            ).toWhiteContainer(width: double.infinity, pading: const EdgeInsets.all(12), borderRadius: 0),
            10.height,
            Column(
              children: [
                CustomSettingOptionsTile(
                  leadingWidget: SizedBox(
                    width: 16,
                    height: 16,
                    child: SvgPicture.asset(
                      MyAssets.icStar,
                      color: MyColors.primaryColor,
                    ),
                  ),
                  titleText: "My Subscriptions",
                  subTitle: "Silver",
                  isForLanguage: false,
                  needBorderBelow: true,
                  onTap: () {
                    navigateWithName(context, AppRoutes.mySubscriptionsPage);
                  },
                ),
                CustomSettingOptionsTile(
                  leadingWidget: SizedBox(
                    width: 16,
                    height: 16,
                    child: SvgPicture.asset(
                      MyAssets.icGroupStar,
                      // color: MyColors.primaryColor,
                    ),
                  ),
                  titleText: "Subscriptions",
                  subTitle: null,
                  isForLanguage: false,
                  needBorderBelow: false,
                  onTap: () {
                    navigateWithName(context, AppRoutes.subscriptionsPage);
                  },
                )
              ],
            ).toWhiteContainer(width: double.infinity, pading: const EdgeInsets.all(12), borderRadius: 0),
            10.height,
            (AppState().currentAppType == AppType.provider) ? const Text("Provider") : const Text("Customer"),
          ],
        ),
      ),
    );
  }

  Widget showItem({required String icon, required String title, required VoidCallback onTap, String? subTitle}) {
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: 16,
              height: 16,
              child: SvgPicture.asset(
                icon,
                color: subTitle == null ? MyColors.black : MyColors.primaryColor,
              ),
            ),
            12.width,
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  title.toText(isBold: false, fontSize: 16),
                  if (subTitle != null) subTitle.toText(fontSize: 14, color: MyColors.primaryColor),
                ],
              ),
            ),
            const Icon(
              Icons.arrow_forward,
              size: 16,
            ),
          ],
        ),
      ),
    );
  }
}
