import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:tanami_app/core/styles/app_images.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:tanami_app/shared/components/text_widget.dart';

import '../../../../../../core/styles/app_color.dart';
import '../../../../../countrySelection/presentation/bloc/choose_country_bloc.dart';
import '../../../../../countrySelection/presentation/bloc/choose_country_event.dart';
import '../../../../../countrySelection/presentation/bloc/choose_country_state.dart';

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

  @override
  Widget build(BuildContext context) {
    final radioBloc = context.read<RadioBloc>();
    return Padding(
      padding: const EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 0.0),
      child: BlocBuilder<RadioBloc, RadioState>(
        builder: (context, state) {
          int selectedIndex = 0;
          if (state is RadioSelectionChanged) {
            selectedIndex = state.selectedIndex;
          }

          return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                TextWidget().text15W700(AppText.choosePaymentMethodText,
                    clr: AppColor.plainBlack),
                const Gap(16),
                GestureDetector(
                  onTap: () {
                    radioBloc.add(const RadioSelected(0));
                  },
                  child: Container(
                    clipBehavior: Clip.antiAlias,
                    // padding: const EdgeInsets.all(12),
                    decoration: ShapeDecoration(
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        side: const BorderSide(color: Color(0xFFD8D8D8)),
                        borderRadius: BorderRadius.circular(22),
                      ),
                      shadows: const [
                        BoxShadow(
                          color: Color(0x14000000),
                          blurRadius: 8,
                          offset: Offset(-2, -2),
                          spreadRadius: 0.50,
                        ),
                        BoxShadow(
                          color: Color(0x3391978E),
                          blurRadius: 8,
                          offset: Offset(2, 2),
                          spreadRadius: 1,
                        )
                      ],
                    ),
                    child: Column(
                      children: [
                        Container(
                          padding: const EdgeInsets.all(12),
                          decoration: BoxDecoration(
                            color: selectedIndex == 0
                                ? const Color(0xFFE4F5E9)
                                : const Color(0xCCE2E2E2),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Radio<int>(
                                    activeColor: AppColor.radioActiveColor,
                                    value: 0,
                                    groupValue: selectedIndex,
                                    onChanged: (int? value) {
                                      if (value != null) {
                                        radioBloc.add(RadioSelected(value));
                                      }
                                    },
                                  ),
                                  const Gap(5),
                                  SvgPicture.asset(AppImages.walletIcon),
                                  const Gap(5),
                                  TextWidget().text14W700(AppText.walletText,
                                      clr: AppColor.textLabelColor),
                                ],
                              ),
                              Row(
                                children: [
                                  RichText(
                                    text: TextSpan(
                                      children: [
                                        TextSpan(
                                          text: '${AppText.balanceText}: ',
                                          style: GoogleFonts.dmSans(
                                            color: Colors.grey,
                                            fontSize: 12.0,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                        TextSpan(
                                          text: 'SAR 178,000',
                                          style: GoogleFonts.dmSans(
                                            color: Colors.black,
                                            fontSize: 14.0,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  const Icon(
                                    Icons.arrow_forward,
                                    color: Colors.grey,
                                    size: 15,
                                  )
                                ],
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(12),
                          child: TextWidget().text14W500(
                            "condimentum ac, vestibulum eu nisl.torquent per conubia nostra, per inceptos himenaeos.",
                            clr: AppColor.textLabelColor,
                            txtAlign: TextAlign.start,
                          ),
                        ),
                        const Gap(12),
                      ],
                    ),
                  ),
                ),
                const Gap(12),
                GestureDetector(
                  onTap: () {
                    radioBloc.add(const RadioSelected(1));
                  },
                  child: Container(
                    clipBehavior: Clip.antiAlias,
                    // padding: const EdgeInsets.all(12),
                    decoration: ShapeDecoration(
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        side: const BorderSide(color: Color(0xFFD8D8D8)),
                        borderRadius: BorderRadius.circular(22),
                      ),
                      shadows: const [
                        BoxShadow(
                          color: Color(0x14000000),
                          blurRadius: 8,
                          offset: Offset(-2, -2),
                          spreadRadius: 0.2,
                        ),
                        BoxShadow(
                          color: Color(0x3391978E),
                          blurRadius: 8,
                          offset: Offset(2, 2),
                          spreadRadius: 1,
                        )
                      ],
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          padding: const EdgeInsets.all(12),
                          decoration: BoxDecoration(
                            color: selectedIndex == 1
                                ? const Color(0xFFE4F5E9)
                                : const Color(0xCCE2E2E2),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Radio<int>(
                                    activeColor: AppColor.radioActiveColor,
                                    value: 1,
                                    groupValue: selectedIndex,
                                    onChanged: (int? value) {
                                      if (value != null) {
                                        radioBloc.add(RadioSelected(value));
                                      }
                                    },
                                  ),
                                  const Gap(5),
                                  SvgPicture.asset(AppImages.applePayIcon),
                                  const Gap(5),
                                  TextWidget().text14W700(AppText.applePayText,
                                      clr: AppColor.textLabelColor),
                                ],
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(12),
                          child: TextWidget().text14W500(
                            AppText.instantTransferFundsApplePayText,
                            clr: AppColor.textLabelColor,
                            txtAlign: TextAlign.start,
                          ),
                        ),
                        const Gap(12),
                      ],
                    ),
                  ),
                ),
                const Gap(16),
              ]);
        },
      ),
    );
  }
}
