// ignore: file_names
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';

import '../../../../../../core/routes/route_name.dart';
import '../../../../../../core/routes/routes.dart';
import '../../../../../../core/styles/app_color.dart';
import '../../../../../../core/styles/app_images.dart';
import '../../../../../../core/styles/app_text.dart';
import '../../../../../../core/utils/language/localizations_delegate.dart';
import '../../../../../../core/utils/text_formatter/comma_input_text_formatter.dart';
import '../../../../../../shared/components/text_widget.dart';
import '../../../../../countrySelection/bloc/choose_country_bloc.dart';
import '../../../../../countrySelection/bloc/choose_country_state.dart';
import '../../bloc/deposit/deposit_payment_bloc.dart';
import '../../bloc/deposit/deposit_payment_event.dart';
import '../../bloc/deposit/deposit_payment_state.dart';

class DepositLayout extends StatelessWidget {
  const DepositLayout({super.key});

  @override
  Widget build(BuildContext context) {
    var localizations = AppLocalizations.of(context);
    final depositPaymentBloc = context.read<DepositPaymentBloc>();
    int selectedIndex = 0;
    return Scaffold(
      bottomNavigationBar: BlocBuilder<DepositPaymentBloc, DepositPaymentState>(
        builder: (context, state) {
          return BlocBuilder<RadioBloc, RadioState>(
            builder: (context, radioState) {
              if (radioState is RadioSelectionChanged) {
                selectedIndex = radioState.selectedIndex;
              }
              return Padding(
                padding: MediaQuery.of(context).viewInsets,
                child: GestureDetector(
                  onTap: () {
                    if (state.isFormValid) {
                      goRouter.pushNamed(RouteName.depositPreview);
                    }
                  },
                  child: selectedIndex == 1
                      ? Container(
                          margin: const EdgeInsets.all(10.0),
                          height: 65.h,
                          width: double.infinity,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(22.r),
                              color: state.isFormValid
                                  ? AppColor.plainBlack
                                  : AppColor.inactiveBtnColor),
                          child: Center(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                SvgPicture.asset(
                                  AppImages.applePayIcon,
                                  color: AppColor.plainWhite,
                                  height: 32,
                                  width: 32,
                                ),
                                const Gap(5),
                                Text(
                                  localizations
                                      .translate(AppText.payWithAppleText),
                                  style: GoogleFonts.dmSans(
                                    color: state.isFormValid
                                        ? AppColor.plainWhite
                                        : AppColor.inactiveBtnTxtColor,
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      : Container(
                          margin: const EdgeInsets.all(10.0),
                          height: 65.h,
                          width: double.infinity,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(22.r),
                              color: state.isFormValid
                                  ? AppColor.primaryColor2
                                  : AppColor.inactiveBtnColor),
                          child: Center(
                            child: Text(
                              localizations.translate(AppText.next),
                              style: GoogleFonts.dmSans(
                                color: state.isFormValid
                                    ? AppColor.plainWhite
                                    : AppColor.inactiveBtnTxtColor,
                                fontSize: 14.sp,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                        ),
                ),
              );
            },
          );
        },
      ),
      backgroundColor: AppColor.plainWhite,
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // RichText(
              //   text: TextSpan(
              //     children: [
              //       TextSpan(
              //         text: '${localizations.translate(AppText.balance)}: ',
              //         style: GoogleFonts.dmSans(
              //           color: Colors.grey,
              //           fontSize: 12.sp,
              //           fontWeight: FontWeight.bold,
              //         ),
              //       ),
              //       TextSpan(
              //         text: 'SAR 178,000',
              //         style: GoogleFonts.dmSans(
              //           color: Colors.black,
              //           fontSize: 14.sp,
              //           fontWeight: FontWeight.bold,
              //         ),
              //       ),
              //     ],
              //   ),
              // ),

              // SizedBox(
              //   height: 20.h,
              // ),
              BlocBuilder<DepositPaymentBloc, DepositPaymentState>(
                builder: (context, state) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Center(
                          child: SvgPicture.asset(AppImages.dStepCount1Icon)),
                      const Gap(30),
                      Center(
                        child: TextWidget().text14W500(
                            localizations.translate(
                                AppText.insertTheAmountYouWouldLikeToTransfer),
                            clr: AppColor.textLabelColor),
                      ),
                      const Gap(30),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                            vertical: 16.0, horizontal: 12.0),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            TextWidget().text15W400("SAR",
                                clr: AppColor.textLabelColor),
                            Gap(12.w),
                            SizedBox(
                              width: 280.w,
                              child: TextFormField(
                                inputFormatters: [
                                  CommaTextInputFormatter(),
                                  FilteringTextInputFormatter.deny(
                                      RegExp(r'\s')),
                                  LengthLimitingTextInputFormatter(20),
                                ],
                                validator: (value) {
                                  if (depositPaymentBloc
                                      .amountController.text.isEmpty) {
                                    return localizations.translate(
                                        AppText.pleaseEnterAmountText);
                                  }
                                  return null;
                                },
                                onChanged: (value) {
                                  depositPaymentBloc
                                      .add(FormTextChanged(text: value));
                                },
                                controller: depositPaymentBloc.amountController,
                                cursorColor: Colors.black,
                                keyboardType: TextInputType.number,
                                textAlign: TextAlign.center,
                                style: GoogleFonts.dmSans(
                                  color: Colors.black,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.w400,
                                ),
                                decoration: InputDecoration(
                                  hintText: '1000',
                                  hintStyle: GoogleFonts.dmSans(
                                    color: const Color(0xFFC6C6C6),
                                    fontSize: 16.sp,
                                    fontWeight: FontWeight.w400,
                                  ),
                                  labelStyle:
                                      const TextStyle(color: Colors.black),
                                  contentPadding: const EdgeInsets.symmetric(
                                      vertical: 15, horizontal: 10),
                                  filled: true,
                                  fillColor: Colors.white,
                                  border: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(12),
                                    borderSide: const BorderSide(
                                        color: Colors.white, width: 1),
                                  ),
                                  enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(12),
                                    borderSide: const BorderSide(
                                        color: Colors.white, width: 1),
                                  ),
                                  disabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(12),
                                    borderSide: const BorderSide(
                                        color: Colors.white, width: 1),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(12),
                                    borderSide: const BorderSide(
                                        color: Colors.white, width: 1),
                                  ),
                                  errorBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(12),
                                    borderSide: const BorderSide(
                                        color: Colors.red, width: 1),
                                  ),
                                  focusedErrorBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(12),
                                    borderSide: const BorderSide(
                                        color: Colors.red, width: 1),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      // Container(
                      //   decoration: BoxDecoration(
                      //     color: const Color(0xFFD8D8D8).withOpacity(0.4),
                      //     borderRadius: BorderRadius.only(
                      //       bottomLeft: Radius.circular(22.r),
                      //       bottomRight: Radius.circular(22.r),
                      //     ),
                      //     border: const Border(
                      //       top: BorderSide(
                      //           color: Color(0xFFD8D8D8), width: 2.0),
                      //     ),
                      //   ),
                      //   child: Padding(
                      //     padding: const EdgeInsets.symmetric(
                      //         vertical: 16.0, horizontal: 12.0),
                      //     child: Column(
                      //       children: [
                      //         Row(
                      //           mainAxisAlignment:
                      //               MainAxisAlignment.spaceBetween,
                      //           children: [
                      //             Text(
                      //               localizations
                      //                   .translate(AppText.processingFees),
                      //               style: GoogleFonts.dmSans(
                      //                 color: const Color(0xFF535353),
                      //                 fontSize: 14.sp,
                      //                 fontWeight: FontWeight.w500,
                      //               ),
                      //             ),
                      //             Text(
                      //               '3%',
                      //               style: GoogleFonts.dmSans(
                      //                 color: Colors.black,
                      //                 fontSize: 14.sp,
                      //                 fontWeight: FontWeight.w700,
                      //               ),
                      //             ),
                      //           ],
                      //         ),
                      //       ],
                      //     ),
                      //   ),
                      // ),

                      // const Gap(15),
                      // Row(
                      //   mainAxisAlignment: MainAxisAlignment.center,
                      //   children: [
                      //     Text(
                      //       localizations
                      //           .translate("Total : SAR ${state.amount}"),
                      //       style: GoogleFonts.dmSans(
                      //         color: const Color(0xFF066123),
                      //         fontSize: 16.sp,
                      //         fontWeight: FontWeight.w700,
                      //       ),
                      //     ),
                      //   ],
                      // ),
                    ],
                  );
                },
              ),
              // const Gap(30),
              // const DepositPayMethodSection(),
              // const Gap(16),
            ],
          ),
        ),
      ),
    );
  }
}
