Cable tv with bloc

//Vtu State
// ignore_for_file: public_member_api_docs, sort_constructors_first
part of 'vtu_bloc.dart';

class VtuState extends Equatable {
  final FormSubmissionStatus formStatus;
  final List<DataModel> dataService;
  final List<AirtimeModel> airtimeService;
  final List<BillPaymentModel> billPaymentService;
  final List<CableModel> cableService;
  final int selectedCableService;
  final List<CableIdModel> cableProductId;
  final int selectedCablePlan;
  const VtuState({
    this.formStatus = const InitialFormStatus(),
    this.dataService = const [],
    this.airtimeService = const [],
    this.billPaymentService = const [],
    this.cableService = const [],
    this.selectedCableService = 0,
    this.cableProductId = const [],
    this.selectedCablePlan = 0,
  });

  VtuState copyWith({
    FormSubmissionStatus? formStatus,
    List<DataModel>? dataService,
    List<AirtimeModel>? airtimeService,
    List<BillPaymentModel>? billPaymentService,
    List<CableModel>? cableService,
    int? selectedCableService,
    List<CableIdModel>? cableProductId,
    int? selectedCablePlan,
  }) {
    return VtuState(
        formStatus: formStatus ?? this.formStatus,
        dataService: dataService ?? this.dataService,
        airtimeService: airtimeService ?? this.airtimeService,
        billPaymentService: billPaymentService ?? this.billPaymentService,
        cableService: cableService ?? this.cableService,
        selectedCableService: selectedCableService ?? this.selectedCableService,
        cableProductId: cableProductId ?? this.cableProductId,
        selectedCablePlan: selectedCablePlan ?? this.selectedCablePlan);
  }

  @override
  List<Object?> get props => [
        formStatus,
        billPaymentService,
        dataService,
        cableService,
        airtimeService,
        selectedCableService,
        cableProductId,
        selectedCablePlan,
      ];
}



//Vtu Event

// ignore_for_file: prefer_const_constructors_in_immutables

part of 'vtu_bloc.dart';

abstract class VtuEvent extends Equatable {
  const VtuEvent();
  @override
  List<Object?> get props => [];
}

class VtuInitial extends VtuEvent {
  const VtuInitial();
}

class GetDataService extends VtuEvent {
  const GetDataService();
}

class GetAirtimeService extends VtuEvent {
  const GetAirtimeService();
}

class GetCableService extends VtuEvent {
  const GetCableService();
}

class GetCableProductId extends VtuEvent {
  final String cableId;
  const GetCableProductId({required this.cableId});
  @override
  List<Object?> get props => [cableId];
}

class SelectCableService extends VtuEvent {
  final int selectedIndex;
  const SelectCableService({required this.selectedIndex});
  @override
  List<Object?> get props => [selectedIndex];
}

class SelectCablePlan extends VtuEvent {
  final int selectedIndex;
  const SelectCablePlan({required this.selectedIndex});
  @override
  List<Object?> get props => [selectedIndex];
}

class GetBillPaymentService extends VtuEvent {
  const GetBillPaymentService();
}


//Vtu bloc
import 'dart:async';
import 'package:bitfornaira/blocs/form_submission_status.dart';
import 'package:bitfornaira/models/airtime_model.dart';
import 'package:bitfornaira/models/bill_model.dart';
import 'package:bitfornaira/models/cable_id_model.dart';
import 'package:bitfornaira/models/cable_model.dart';
import 'package:bitfornaira/models/data_model.dart';
import 'package:bitfornaira/repository/vtu_repository.dart';
import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';

part 'vtu_event.dart';
part 'vtu_state.dart';

class VtuBloc extends Bloc<VtuEvent, VtuState> {
  final VtuRepository vtuRepo;

  VtuBloc({required this.vtuRepo}) : super(const VtuState()) {
    on<VtuInitial>((event, emit) =>
        emit(state.copyWith(formStatus: const InitialFormStatus())));
    on<GetDataService>(_getDataService);
    on<GetAirtimeService>(_getAirtimeService);
    on<GetCableService>(_getCableService);
    on<GetBillPaymentService>(_getBillPaymentService);
    on<SelectCableService>(_selectCableService);
    on<GetCableProductId>(_getCableProductId);
    on<SelectCablePlan>(_selectCablePlan);
  }
  FutureOr<void> _getDataService(
      GetDataService event, Emitter<VtuState> emit) async {
    emit(state.copyWith(formStatus: FormSubmitting()));
    try {
      List data = await vtuRepo.getVtuServices("DATA");
      List<DataModel> dataList =
          data.map((e) => DataModel.fromJson(e)).toList();
      emit(state.copyWith(
          dataService: dataList, formStatus: SubmissionSuccess()));
    } catch (e) {
      emit(state.copyWith(formStatus: SubmissionFailed(msg: e.toString())));
    }
  }

  FutureOr<void> _getAirtimeService(
      GetAirtimeService event, Emitter<VtuState> emit) async {
    emit(state.copyWith(formStatus: FormSubmitting()));

    try {
      List data = await vtuRepo.getVtuServices("AIRTIME");
      List<AirtimeModel> dataList =
          data.map((e) => AirtimeModel.fromJson(e)).toList();
      emit(state.copyWith(
          airtimeService: dataList, formStatus: SubmissionSuccess()));
    } catch (e) {
      emit(state.copyWith(formStatus: SubmissionFailed(msg: e.toString())));
    }
  }

  FutureOr<void> _getCableService(
      GetCableService event, Emitter<VtuState> emit) async {
    emit(state.copyWith(formStatus: FormSubmitting()));
    try {
      List data = await vtuRepo.getVtuServices("CABLE");
      List<CableModel> dataList =
          data.map((e) => CableModel.fromJson(e)).toList();
      emit(state.copyWith(
          cableService: dataList, formStatus: SubmissionSuccess()));
    } catch (e) {
      emit(state.copyWith(formStatus: SubmissionFailed(msg: e.toString())));
    }
  }

  FutureOr<void> _getBillPaymentService(
      GetBillPaymentService event, Emitter<VtuState> emit) async {
    try {
      emit(state.copyWith(formStatus: FormSubmitting()));
      List data = await vtuRepo.getVtuServices("BILLPAYMENT");
      List<BillPaymentModel> dataList =
          data.map((e) => BillPaymentModel.fromJson(e)).toList();
      emit(state.copyWith(
          billPaymentService: dataList, formStatus: SubmissionSuccess()));
    } catch (e) {
      emit(state.copyWith(formStatus: SubmissionFailed(msg: e.toString())));
    }
  }

  FutureOr<void> _selectCableService(
      SelectCableService event, Emitter<VtuState> emit) {
    emit(state.copyWith(selectedCableService: event.selectedIndex));
  }

  FutureOr<void> _getCableProductId(
      GetCableProductId event, Emitter<VtuState> emit) async {
    emit(state.copyWith(formStatus: FormSubmitting()));
    try {
      List data = await vtuRepo.getCableTvId(event.cableId);
      List<CableIdModel> dataList =
          data.map((e) => CableIdModel.fromJson(e)).toList();
      emit(state.copyWith(
          formStatus: SubmissionSuccess(), cableProductId: dataList));
    } catch (e) {
      emit(state.copyWith(
        formStatus: SubmissionFailed(msg: e.toString()),
      ));
    }
  }

  FutureOr<void> _selectCablePlan(
      SelectCablePlan event, Emitter<VtuState> emit) {
    emit(state.copyWith(selectedCablePlan: event.selectedIndex));
  }
}

//Cable Tv Screen
import 'package:bitfornaira/blocs/form_submission_status.dart';
import 'package:bitfornaira/blocs/vtu/vtu_bloc.dart';
import 'package:bitfornaira/constants/colors.dart';
import 'package:bitfornaira/constants/icons_url.dart';
import 'package:bitfornaira/constants/image_url.dart';
import 'package:bitfornaira/constants/strings.dart';
import 'package:bitfornaira/repository/vtu_repository.dart';
import 'package:bitfornaira/screens/CableTv/widgets/cable_tv_widget.dart';
import 'package:bitfornaira/utils/utils_size.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:shimmer/shimmer.dart';
import '../../global_widgets/global_widget.dart';

class CableTv extends StatefulWidget {
  const CableTv({Key? key}) : super(key: key);
  static String routeName = "/cableTv";
  @override
  _CableTvState createState() => _CableTvState();
}

class _CableTvState extends State<CableTv> {
  @override
  void initState() {
    super.initState();
    if (context.read<VtuBloc>().state.cableService.isEmpty == true) {
      context.read<VtuBloc>().add(const GetCableService());
    }
    VtuRepository vtuRepo = VtuRepository();
    vtuRepo.getCableTvId("cableId");
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Scaffold(
      body: SingleChildScrollView(
        child: BlocConsumer<VtuBloc, VtuState>(
          listener: (context, state) {},
          builder: (context, state) {
            return Container(
              height: size.height,
              width: size.width,
              color: federalBlue,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Container(),
                  Positioned(
                    top: getProportionateScreenHeight(35),
                    right: getProportionateScreenWidth(20),
                    left: getProportionateScreenWidth(20),
                    child: Container(
                      height: size.height * 0.2,
                      decoration: BoxDecoration(
                        color: cartonColor,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(
                            getProportionateScreenWidth(30),
                          ),
                          topRight: Radius.circular(
                            getProportionateScreenWidth(30),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    top: getProportionateScreenHeight(45),
                    right: getProportionateScreenWidth(0),
                    left: getProportionateScreenWidth(0),
                    child: Container(
                      height: size.height,
                      padding: EdgeInsets.symmetric(
                        horizontal: getProportionateScreenWidth(5),
                        vertical: getProportionateScreenWidth(20),
                      ),
                      decoration: BoxDecoration(
                        color: bgColor,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(
                            getProportionateScreenWidth(30),
                          ),
                          topRight: Radius.circular(
                            getProportionateScreenWidth(30),
                          ),
                        ),
                      ),
                      child: SingleChildScrollView(
                        child: Column(
                          children: [
                            customAppBar(
                              context: context,
                              title: cableTv,
                            ),
                            verticalSpace(
                              getProportionateScreenHeight(10),
                            ),
                            Padding(
                              padding: EdgeInsets.symmetric(
                                horizontal: getProportionateScreenWidth(10),
                              ),
                              child: Column(
                                children: [
                                  Row(
                                    children: [
                                      Text(
                                        serviceProviderText,
                                        style: TextStyle(
                                          fontFamily: appFontFamily1,
                                          color: black,
                                          fontWeight: FontWeight.w400,
                                          fontSize:
                                              getProportionateScreenWidth(16),
                                        ),
                                      )
                                    ],
                                  ),
                                  verticalSpace(
                                      getProportionateScreenHeight(10)),
                                  state.formStatus is FormSubmitting
                                      ? Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [1, 2, 3, 4]
                                              .map((e) => Shimmer.fromColors(
                                                  baseColor:
                                                      Colors.grey.shade300,
                                                  highlightColor:
                                                      Colors.grey.shade100,
                                                  child: Column(
                                                    children: [
                                                      Container(
                                                        decoration: BoxDecoration(
                                                            color: Theme.of(
                                                                    context)
                                                                .cardColor,
                                                            borderRadius:
                                                                BorderRadius
                                                                    .circular(
                                                                        50)),
                                                        height:
                                                            getProportionateScreenHeight(
                                                                67),
                                                        width:
                                                            getProportionateScreenHeight(
                                                                67),
                                                      ),
                                                      verticalSpace(
                                                          getProportionateScreenHeight(
                                                              15)),
                                                      Container(
                                                        decoration:
                                                            BoxDecoration(
                                                          color:
                                                              Theme.of(context)
                                                                  .cardColor,
                                                        ),
                                                        height:
                                                            getProportionateScreenHeight(
                                                                10),
                                                        width:
                                                            getProportionateScreenHeight(
                                                                50),
                                                      ),
                                                    ],
                                                  )))
                                              .toList(),
                                        )
                                      : Row(
                                          // mainAxisAlignment: MainAxisAlignment.start,
                                          children: List.generate(
                                              state.cableService.length,
                                              (index) {
                                          final myCableService =
                                              state.cableService[index];
                                          return cableTvServiceProviderCards(
                                            selected:
                                                state.selectedCableService ==
                                                        index
                                                    ? true
                                                    : false,
                                            borderColor:
                                                state.selectedCableService ==
                                                        index
                                                    ? black
                                                    : transparent,
                                            context: context,
                                            icon: gotvUrl,
                                            text: myCableService.name,
                                            onTap: () {
                                              print("pressed");
                                              context.read<VtuBloc>().add(
                                                    SelectCableService(
                                                        selectedIndex: index),
                                                  );
                                              context.read<VtuBloc>().add(
                                                  GetCableProductId(
                                                      cableId:
                                                          myCableService.id));
                                              print(myCableService.id);
                                            },
                                          );
                                        })),
                                  verticalSpace(
                                      getProportionateScreenHeight(15)),
                                  fieldTitle(text: subscriptionPlanText),
                                  cableTvDropDownContainer(
                                    context: context,
                                    containerColor: white,
                                    text: selectSubscriptionPlan,
                                    icon: arrowDownUrl,
                                    onTap: () {
                                      showModalBottomSheet(
                                        context: context,
                                        builder: (BuildContext context) {
                                          return const SelectCableTvPlanBottomSheet();
                                        },
                                      );
                                    },
                                  ),
                                  verticalSpace(
                                      getProportionateScreenHeight(10)),
                                  fieldTitle(text: smartCardNumber),
                                  const buildTextField(
                                    hintText: enterIUCNumber,
                                    fillColor: white,
                                    filled: true,
                                  ),
                                  verticalSpace(
                                      getProportionateScreenHeight(50)),
                                  customButton(
                                      context: context,
                                      buttonColor: orange.withOpacity(0.3),
                                      buttonTextColor: white,
                                      buttonText: proceedText,
                                      onPressed: () {
                                        showModalBottomSheet(
                                          context: context,
                                          builder: (BuildContext context) {
                                            return const CableTvTransactionConfirmationBottomSheet();
                                          },
                                        );
                                      }),
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

//Cable Tv Widgets

import 'dart:async';

import 'package:bitfornaira/blocs/vtu/vtu_bloc.dart';
import 'package:bitfornaira/constants/colors.dart';
import 'package:bitfornaira/constants/icons_url.dart';
import 'package:bitfornaira/constants/image_url.dart';
import 'package:bitfornaira/constants/strings.dart';
import 'package:bitfornaira/global_widgets/global_widget.dart';
import 'package:bitfornaira/screens/BuyData/transaction_successful.dart';
import 'package:bitfornaira/utils/utils_size.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

Widget cableTvServiceProviderCards({
  required BuildContext context,
  required String icon,
  required String text,
  required Color borderColor,
  bool? selected,
  void Function()? onTap,
}) {
  return Stack(
    alignment: Alignment.center,
    children: [
      Container(
        height: getProportionateScreenHeight(100),
        width: getProportionateScreenHeight(90),
        child: Column(
          children: [
            InkWell(
              onTap: onTap,
              child: Container(
                height: getProportionateScreenHeight(67),
                width: getProportionateScreenHeight(67),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  border: Border.all(color: borderColor),
                ),
                child: Image.asset(
                  icon,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            verticalSpace(getProportionateScreenHeight(5)),
            Text(
              text,
              style: TextStyle(
                fontFamily: appFontFamily1,
                fontSize: getProportionateScreenWidth(14),
                color: black,
                fontWeight: FontWeight.w400,
              ),
            )
          ],
        ),
      ),
      Positioned(
        top: 0,
        right: getProportionateScreenWidth(10),
        child: selected == true
            ? Container(
                height: getProportionateScreenHeight(20),
                width: getProportionateScreenHeight(20),
                decoration: const BoxDecoration(
                  color: black,
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  Icons.check,
                  color: white,
                  size: getProportionateScreenHeight(14),
                ),
              )
            : const SizedBox(),
      )
    ],
  );
}

Widget cableTvDropDownContainer({
  required BuildContext context,
  required String text,
  required String icon,
  required Color containerColor,
  void Function()? onTap,
}) {
  return InkWell(
    onTap: onTap,
    child: Container(
      height: getProportionateScreenHeight(55),
      width: double.infinity,
      padding: EdgeInsets.symmetric(
        horizontal: getProportionateScreenWidth(15),
      ),
      decoration: BoxDecoration(
        color: containerColor,
        border: Border.all(color: lightGrey),
        borderRadius: BorderRadius.all(
          Radius.circular(
            getProportionateScreenHeight(10),
          ),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            text,
            style: TextStyle(
              fontFamily: appFontFamily1,
              fontSize: getProportionateScreenWidth(14),
              fontWeight: FontWeight.w400,
              color: lightGrey,
            ),
          ),
          Image.asset(
            icon,
            width: getProportionateScreenWidth(12),
          )
        ],
      ),
    ),
  );
}

Widget cableTvValueContainer({
  required BuildContext context,
  required String text,
  required Color buttonColor,
  required Color textColor,
  void Function()? onTap,
}) {
  return InkWell(
    onTap: onTap,
    child: Container(
      alignment: Alignment.centerLeft,
      height: getProportionateScreenHeight(55),
      margin: EdgeInsets.only(bottom: getProportionateScreenHeight(8)),
      width: double.infinity,
      padding: EdgeInsets.only(left: getProportionateScreenWidth(8)),
      decoration: BoxDecoration(
        color: buttonColor,
        borderRadius: BorderRadius.all(
          Radius.circular(getProportionateScreenHeight(10)),
        ),
      ),
      child: Text(
        text,
        style: TextStyle(
          fontFamily: monseratFont,
          color: textColor,
          fontSize: getProportionateScreenWidth(14),
          fontWeight: FontWeight.w400,
        ),
      ),
    ),
  );
}

class SelectCableTvPlanBottomSheet extends StatelessWidget {
  const SelectCableTvPlanBottomSheet({super.key});
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<VtuBloc, VtuState>(
      builder: (context, state) {
        return ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(getProportionateScreenWidth(20)),
            topRight: Radius.circular(getProportionateScreenWidth(20)),
          ),
          child: Container(
            color: white,
            width: double.infinity,
            padding: EdgeInsets.all(getProportionateScreenWidth(16)),
            // ignore: sort_child_properties_last
            child: SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        selectdataText,
                        style: TextStyle(
                          fontSize: getProportionateScreenWidth(17),
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                  verticalSpace(getProportionateScreenHeight(10)),
                  Column(
                    children: List.generate(state.cableService.length, (index) {
                      final productPlanList = state.cableService[index];
                      return cableTvValueContainer(
                        context: context,
                        text:
                            "Basic  Bouquet - Monthly - ₦${productPlanList.sellingPrice.toString()}",
                        textColor: state.selectedCablePlan == index
                            ? lightWhite
                            : black,
                        buttonColor: state.selectedCablePlan == index
                            ? federalBlue
                            : lighthash,
                        onTap: () {
                          context
                              .read<VtuBloc>()
                              .add(SelectCablePlan(selectedIndex: index));
                          // print(productPlanList.sellingPrice.toString());
                        },
                      );
                    }),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

Widget cableTvransConfirmationWidget({
  required String transConfirm,
  required String transConfirmValue,
}) {
  return Padding(
    padding: EdgeInsets.only(bottom: getProportionateScreenHeight(18)),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          transConfirm,
          style: TextStyle(
            fontSize: getProportionateScreenWidth(14),
            fontWeight: FontWeight.w400,
            color: lightBlack,
          ),
        ),
        Text(
          transConfirmValue,
          style: TextStyle(
            fontFamily: monseratFont,
            fontSize: getProportionateScreenWidth(14),
            fontWeight: FontWeight.w400,
            color: lightBlack,
          ),
        ),
      ],
    ),
  );
}

class CableTvTransactionConfirmationBottomSheet extends StatelessWidget {
  const CableTvTransactionConfirmationBottomSheet({super.key});
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<VtuBloc, VtuState>(
      builder: (context, state) {
        return ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(getProportionateScreenWidth(20)),
            topRight: Radius.circular(getProportionateScreenWidth(20)),
          ),
          child: Container(
            color: white,
            width: double.infinity,
            padding: EdgeInsets.all(getProportionateScreenWidth(16)),
            // ignore: sort_child_properties_last
            child: SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        transactionConfirmationText,
                        style: TextStyle(
                          fontSize: getProportionateScreenWidth(16),
                          fontWeight: FontWeight.w400,
                          color: black,
                        ),
                      ),
                    ],
                  ),
                  verticalSpace(getProportionateScreenHeight(25)),
                  Container(
                    padding: EdgeInsets.all(getProportionateScreenWidth(20)),
                    decoration: BoxDecoration(
                      color: bgColor,
                      borderRadius: BorderRadius.all(
                        Radius.circular(getProportionateScreenWidth(8)),
                      ),
                    ),
                    child: Column(
                      children: [
                        cableTvransConfirmationWidget(
                          transConfirm: subscriptionPlanText,
                          transConfirmValue: basicBouquet,
                        ),
                        cableTvransConfirmationWidget(
                          transConfirm: cableTvAmount,
                          transConfirmValue: cableTvAmountValue,
                        ),
                        cableTvransConfirmationWidget(
                          transConfirm: smartCardNum,
                          transConfirmValue: smartCardNumberValue,
                        ),
                      ],
                    ),
                  ),
                  verticalSpace(getProportionateScreenHeight(50)),
                  customButton(
                    context: context,
                    buttonColor: orange,
                    buttonTextColor: white,
                    buttonText: proceedText,
                    onPressed: () {
                      Navigator.pop(context);
                      showModalBottomSheet(
                        context: context,
                        builder: (BuildContext context) {
                          return const VerifyFingerprintBottomSheet();
                        },
                      );
                    },
                  ),
                  verticalSpace(getProportionateScreenHeight(20)),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

class VerifyFingerprintBottomSheet extends StatelessWidget {
  const VerifyFingerprintBottomSheet({super.key});
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(getProportionateScreenWidth(20)),
        topRight: Radius.circular(getProportionateScreenWidth(20)),
      ),
      child: Container(
        color: white,
        width: double.infinity,
        padding: EdgeInsets.all(getProportionateScreenWidth(16)),
        // ignore: sort_child_properties_last
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    verifyFingerprintText,
                    style: TextStyle(
                      fontSize: getProportionateScreenWidth(16),
                      fontWeight: FontWeight.w400,
                      color: black,
                    ),
                  ),
                ],
              ),
              Text(
                touchFingerprintText,
                style: TextStyle(
                  fontFamily: appFontFamily1,
                  fontSize: getProportionateScreenWidth(12),
                  fontWeight: FontWeight.w300,
                  color: lightBlack,
                ),
              ),
              verticalSpace(getProportionateScreenHeight(20)),
              Container(
                height: getProportionateScreenHeight(90),
                width: getProportionateScreenHeight(90),
                padding: EdgeInsets.all(getProportionateScreenWidth(8)),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color: bgColor,
                ),
                child: InkWell(
                  onTap: () {},
                  child: Container(
                      height: getProportionateScreenHeight(90),
                      width: getProportionateScreenHeight(90),
                      padding: EdgeInsets.all(getProportionateScreenWidth(18)),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        color: orange,
                      ),
                      child: Image.asset(whiteFingerprint)),
                ),
              ),
              verticalSpace(getProportionateScreenHeight(50)),
              InkWell(
                onTap: () {
                  Navigate.pop(context);
                  showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return const TransactionPinBottomSheet();
                    },
                  );
                },
                child: Text(
                  switchToTransactionPinText,
                  style: TextStyle(
                    fontFamily: appFontFamily1,
                    fontSize: getProportionateScreenWidth(18),
                    fontWeight: FontWeight.w400,
                    color: orange,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<TransactionPinBottomSheet> createState() =>
      _TransactionPinBottomSheetState();
}

class _TransactionPinBottomSheetState extends State<TransactionPinBottomSheet> {
  String enteredPin = '';

  Widget numButton(int number) {
    return Padding(
      padding: const EdgeInsets.only(top: 16),
      child: TextButton(
        onPressed: () {
          setState(() {
            if (enteredPin.length < 4) {
              enteredPin += number.toString();
            } else {
              Timer(const Duration(seconds: 2), () {
                Navigate.navigateToNamed(
                    context, TransactionSuccessful.routeName);
              });
            }
          });
        },
        child: Text(
          number.toString(),
          style: const TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.w600,
            color: Colors.black,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    print(enteredPin);
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(getProportionateScreenWidth(20)),
        topRight: Radius.circular(getProportionateScreenWidth(20)),
      ),
      child: Container(
        color: white,
        width: double.infinity,
        padding: EdgeInsets.all(getProportionateScreenWidth(16)),
        // ignore: sort_child_properties_last
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    verifyFingerprintText,
                    style: TextStyle(
                      fontSize: getProportionateScreenWidth(16),
                      fontWeight: FontWeight.w400,
                      color: black,
                    ),
                  ),
                ],
              ),
              verticalSpace(getProportionateScreenHeight(8)),
              Text(
                touchFingerprintText,
                style: TextStyle(
                  fontFamily: appFontFamily1,
                  fontSize: getProportionateScreenWidth(12),
                  fontWeight: FontWeight.w300,
                  color: lightBlack,
                ),
              ),
              verticalSpace(getProportionateScreenHeight(20)),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(
                  4,
                  (index) {
                    return Container(
                      margin: EdgeInsets.all(getProportionateScreenWidth(8)),
                      width: getProportionateScreenHeight(50),
                      height: getProportionateScreenHeight(50),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6.0),
                        color: bgColor,
                        border: Border.all(
                          color: orange,
                        ),
                      ),
                      child: index < enteredPin.length
                          ? Center(
                              child: Text(
                                enteredPin[index],
                                style: TextStyle(
                                  fontFamily: appFontFamily1,
                                  fontSize: getProportionateScreenHeight(22),
                                  color: lightBlack,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            )
                          : null,
                    );
                  },
                ),
              ),
              for (var i = 0; i < 3; i++)
                Padding(
                  padding: EdgeInsets.only(
                    left: getProportionateScreenWidth(30),
                    right: getProportionateScreenWidth(30),
                    bottom: getProportionateScreenWidth(10),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: List.generate(
                      3,
                      (index) => numButton(1 + 3 * i + index),
                    ).toList(),
                  ),
                ),
              Padding(
                padding: EdgeInsets.only(
                  left: getProportionateScreenWidth(30),
                  right: getProportionateScreenWidth(30),
                  bottom: getProportionateScreenWidth(10),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    TextButton(
                      onPressed: () {
                        //Fingerprint activation goes here
                      },
                      child: Image.asset(
                        orangeFingerprint,
                        width: getProportionateScreenWidth(40),
                      ),
                    ),
                    numButton(0),
                    TextButton(
                      onPressed: () {
                        setState(
                          () {
                            if (enteredPin.isNotEmpty) {
                              enteredPin = enteredPin.substring(
                                  0, enteredPin.length - 1);
                            }
                          },
                        );
                      },
                      child: Image.asset(
                        backSpace,
                        width: getProportionateScreenWidth(25),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}