import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:tanami_app/core/styles/app_text.dart';

import '../../../../Globalconst.dart';
import '../../../../core/styles/app_color.dart';
import '../../../../core/utils/language/localizations_delegate.dart';
import '../../../../core/utils/phone_number_hint_generator/phone_number_hint_generator.dart';
import '../../../../shared/api/api_endpoints.dart';
import '../../../../shared/components/form_label_textfield.dart';
import '../../../countrySelection/bloc/GetCountry/get_country_bloc.dart';
import '../../../countrySelection/bloc/GetCountry/get_country_state.dart';
import '../../../countrySelection/bloc/choose_country_bloc.dart';
import '../../../countrySelection/bloc/choose_country_state.dart';
import '../bloc/register_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    var localizations = AppLocalizations.of(context);
    final registerBloc = context.read<RegisterBloc>();
    final countrydata = context.read<GetCountryBlock>();
    int selectedCountry = -1;
    String flag = "";
    String hintText = '00 000 000';
    return BlocConsumer<RadioBloc, RadioState>(listener: (context, state) {
      if (state is RadioSelectionChanged) {
        selectedCountry = state.selectedIndex;
        final countryState = countrydata.state;
        if (countryState is CountryLoaded) {
          registerBloc.countrySelectionTextField.text = countryState
              .countryModel.data![selectedCountry].countryName
              .toString();
          registerBloc.phoneNumberTextField.text = "";
          registerBloc.isdcode =
              "${countryState.countryModel.data![selectedCountry].iSDcode}";
          if (PhoneNumberHintGenerator().countryPhoneLengths.containsKey(
                registerBloc.isdcode,
              )) {
            final expectedLength = PhoneNumberHintGenerator()
                .countryPhoneLengths[registerBloc.isdcode];
            hintText = PhoneNumberHintGenerator()
                .formatPhoneNumber(registerBloc.isdcode, expectedLength!);
          }
          registerBloc.countryId =
              "${countryState.countryModel.data![selectedCountry].id}";
          flag =
              "${ApiEndpoints.base}${countryState.countryModel.data![selectedCountry].flagIcon}";
          Globalconst.phonenumber = registerBloc.phoneNumberTextField.text;

          Globalconst.name = countryState
              .countryModel.data![selectedCountry].countryName
              .toString();
          Globalconst.isdcode =
              "${countryState.countryModel.data![selectedCountry].iSDcode}";
        }
      }
    }, builder: (context, state) {
      if (state is RadioSelectionChanged) {
        selectedCountry = state.selectedIndex;
      } else {
        selectedCountry = -1;
      }
      return Form(
        key: registerBloc.formKey,
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 14,
          ),
          child: Align(
            alignment: Alignment.topLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Gap(50),
                FormLabelTextField(
                  prefixWidget: selectedCountry == -1
                      ? null
                      : Padding(
                          padding: EdgeInsets.only(left: 12.w),
                          child: SizedBox(
                            height: 50.h,
                            width: 30.w,
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: SizedBox(
                                height: 30.h,
                                width: 30.w,
                                child: ClipRRect(
                                  borderRadius: const BorderRadius.all(
                                      Radius.circular(100)),
                                  child: CachedNetworkImage(
                                      maxHeightDiskCache: 200,
                                      maxWidthDiskCache: 200,
                                      cacheKey: registerBloc
                                          .countrySelectionTextField.text,
                                      key: UniqueKey(),
                                      imageUrl: "${ApiEndpoints.baseurl}$flag",
                                      height: 30.h,
                                      width: 30.w,
                                      placeholder: (context, url) => SizedBox(
                                            height: 30.h,
                                            width: 30.w,
                                            child:
                                                const CircularProgressIndicator(),
                                          ),
                                      errorWidget: (context, url, error) =>
                                          const Icon(Icons.error),
                                      fit: BoxFit.cover),
                                ),
                              ),
                            ),
                          ),
                        ),
                  /* Image.asset(
                          countryFlag[selectedCountry],
                          width: 20,
                          height: 20,
                        ), */
                  hintText: localizations.translate(AppText.chooseCountry),
                  title: localizations.translate(AppText.countryOfResidence),
                  type: "country selection",
                  textEditingController: registerBloc.countrySelectionTextField,
                ),
                const Gap(20),
                FormLabelTextField(
                  prefixWidget: selectedCountry == -1 || flag.isEmpty
                      ? null
                      : Padding(
                          padding: EdgeInsets.only(left: 12.w),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              SizedBox(
                                height: 50.h,
                                width: 30.w,
                                child: Align(
                                  alignment: Alignment.centerLeft,
                                  child: SizedBox(
                                    height: 30.h,
                                    width: 30.w,
                                    child: ClipRRect(
                                      borderRadius: const BorderRadius.all(
                                          Radius.circular(100)),
                                      child: CachedNetworkImage(
                                          maxHeightDiskCache: 200,
                                          maxWidthDiskCache: 200,
                                          cacheKey: registerBloc
                                              .countrySelectionTextField.text,
                                          key: UniqueKey(),
                                          imageUrl: flag,
                                          height: 30.h,
                                          width: 30.w,
                                          placeholder: (context, url) =>
                                              SizedBox(
                                                height: 30.h,
                                                width: 30.w,
                                                child:
                                                    const CircularProgressIndicator(),
                                              ),
                                          errorWidget: (context, url, error) =>
                                              const Icon(Icons.error),
                                          fit: BoxFit.cover),
                                    ),
                                  ),
                                ),
                              ),
                              const Gap(5),
                              Container(
                                  margin: const EdgeInsets.only(top: 10),
                                  height: 30.h,
                                  width: 40.w,
                                  child: Text(
                                    registerBloc.isdcode,
                                    style: GoogleFonts.dmSans(
                                      color: AppColor.charcoalColor,
                                      fontSize: 14,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  )),
                            ],
                          ),
                        ),
                  /* Image.asset(
                          countryFlag[selectedCountry],
                          width: 20,
                          height: 20,
                        ), */
                  hintText: hintText,
                  title: localizations.translate(AppText.phoneNumber),
                  type: "phone number",
                  textEditingController: registerBloc.phoneNumberTextField,
                ),
              ],
            ),
          ),
        ),
      );
    });
  }
}
