import 'package:exide_crr/appLocalization/language_key.dart';
import 'package:exide_crr/constants/app_images.dart';
import 'package:exide_crr/constants/enums.dart';
import 'package:exide_crr/customWidget/app_text.dart';
import 'package:exide_crr/customWidget/button_widget.dart';
import 'package:exide_crr/customWidget/customOnboardScreen/common_onboard_screen.dart';
import 'package:exide_crr/customWidget/custom_text_field.dart';
import 'package:exide_crr/customWidget/simmerWidget/custom_shimmer_widget.dart';
import 'package:exide_crr/res/app_color_text_size.dart';
import 'package:exide_crr/utils/helper_class.dart';
import 'package:exide_crr/views/loginScreen/controller/login_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:get/get_utils/src/extensions/internacionalization.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  LoginController loginController = Get.put(LoginController());

  @override
  Widget build(BuildContext context) {
    return CommonOnboardScreen(
      backgroundImageName: AppImages.backgroundImageLogin,
      child: loginSection(),
    );
  }

  /// Login form section
  /// with next button
  Widget loginSection() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SvgPicture.asset(
            AppImages.appLogo,
            width: 22,
            height: 25,
          ),
          const SizedBox(height: 16),

          /// welcome text
          AppText(
            text: welcomeText.tr,
            fontSize: TextSize.textTitle,
            textColor: AppColor.grayText,
            fontWeight: FontWeight.w500,
          ),
          const SizedBox(height: 8),
          AppText(
            text: pleaseLoginToYourAccount.tr,
            fontSize: TextSize.textSmallSize,
            textColor: AppColor.lightGrey,
            fontWeight: FontWeight.w400,
          ),
          const SizedBox(height: 24),

          /// dealer code
          AppText(
            text: dealerCodeRWD.tr,
            fontSize: TextSize.textXSmallSize,
            textColor: AppColor.lightGrey,
            fontWeight: FontWeight.w500,
          ),
          const SizedBox(height: 8),

          CustomTextField(
            inputAction: TextInputAction.done,
            textFieldText: '',
            hintText: loginHint.tr,
            maxLength: 5,
            inputType: InputType.number.name,
            textEditingController: loginController.dealerCodeController,
            // autoFocus: true,
            onChanged: (value) {
              HelperClass.printWrapped(
                  "loginController ==> ${loginController.dealerCodeController.value.text}");
              if (value.length == 5) {
                /// hide key board
                FocusScope.of(context).unfocus();
                loginController.loginWithDealerCode();
              }
            },
          ),
          const SizedBox(height: 20),
          Obx(() => loginController.dealerData["phone"] == null
              ? const SizedBox()
              : loginController.isLoginLoading.value
                  ? phoneNumberWidgetShimmer()
                  : phoneNumberWidget(
                      phoneNumber: loginController.dealerData["phone"] ?? "")),
          const Spacer(),

          /// next button
          Obx(
            () => CustomButton(
              buttonName: next.tr,
              onTap: () {
                // Get.offNamed(RoutesName.loginScreen);
              },
              activeBackgroundColor: AppColor.darkRed,
              width: Get.width,
              isActive: loginController.dealerData["phone"] != null,
            ),
          ),
        ],
      ),
    );
  }

  /// phone number widget shimmer
  Widget phoneNumberWidgetShimmer() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        shimmerLoader(158.0, 18.0, 6.0),
        const SizedBox(height: 8),
        shimmerLoader(136.0, 18.0, 6.0),
      ],
    );
  }

  /// masked [phoneNumber] widget
  Widget phoneNumberWidget({required String phoneNumber}) {
    String maskedPhoneNumber = phoneNumber.replaceRange(
        0, phoneNumber.length - 2, "X" * (phoneNumber.length - 2));
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        AppText(
          text: yourRegisteredMobileNumber.tr,
          fontSize: TextSize.textXSmallSize,
          textColor: AppColor.lightGrey,
          fontWeight: FontWeight.w500,
        ),
        const SizedBox(height: 8),
        AppText(
          text: "+91 $maskedPhoneNumber",
          fontSize: TextSize.textMediumSize,
          textColor: AppColor.black,
          fontWeight: FontWeight.w500,
        ),
      ],
    );
  }
}