import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/text_caption/text_caption.dart';
import 'package:cims_apps/application/component/text_form/text_form_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/auth/registration/view/submission_data/data_bank/guide_screen.dart';
import 'package:cims_apps/features/auth/registration/view/submission_data/data_bank/list_bank_view.dart';
import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'confirm_bank_account.dart';

class SubmitBankAccount extends StatelessWidget {
  const SubmitBankAccount({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    showSearchBank(TextEditingController valueCtrl) {
      showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        enableDrag: false,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            top: Radius.zero,
          ),
        ),
        builder: (BuildContext context) {
          return StatefulBuilder(
            builder: (context, setState) {
              var flutterView = View.of(context);
              return Padding(
                padding: EdgeInsets.only(
                  top: MediaQueryData.fromView(
                    flutterView,
                  ).padding.top,
                ),
                child: ListBankView(
                  onSelect: (value) {
                    setState(() {
                      valueCtrl.text = value;
                    });
                  },
                ),
              );
            },
          );
        },
      );
    }

    return MultiProvider(
        providers: [
          ChangeNotifierProvider(
            create: (context) => SubmissionDataViewModel(),
          )
        ],
        builder: (context, child) {
          return SizedBox(
            child: Consumer<SubmissionDataViewModel>(
                builder: (context, provider, child) {
              return SizedBox(
                height: SizeConfig.height * .8,
                child: Form(
                  key: provider.formKeySubmitDataBank,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const TextCaption(title: 'Input your bank account data'),
                      TextFormView(
                        name: 'Bank Name',
                        hintText: 'Select bank',
                        readOnly: true,
                        ctrl: provider.ctrlBankName,
                        onTap: () {
                          showSearchBank(provider.ctrlBankName);
                        },
                        suffixIcon: const Icon(
                          Icons.keyboard_arrow_down_outlined,
                        ),
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Field must be filled';
                          }
                          return null;
                        },
                      ),
                      TextFormView(
                        name: 'Account Number',
                        hintText: 'Input Account Number',
                        ctrl: provider.ctrlNoAccountBank,
                        keyboardType: TextInputType.number,
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Field must be filled';
                          }
                          return null;
                        },
                        trailingTitleWidget: SizedBox(
                          width: 24,
                          child: GestureDetector(
                            onTap: () {
                              routePush(context, page: const GuideScreen());
                            },
                            child:
                                const ImageView(image: PathAssets.iconQuestion),
                          ),
                        ),
                      ),
                      TextFormView(
                        name: 'Account Owner Name',
                        hintText: 'Input Account Name',
                        ctrl: provider.ctrlNameAccountBank,
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Field must be filled';
                          }
                          return null;
                        },
                      ),
                      const Text(
                        "Make sure the account you use is in your name, not someone else's",
                        style: TextStyle(
                          color: ColorPalette.slate400,
                        ),
                      ),
                      SizedBox(height: SizeConfig.height * .08),
                      ButtonView(
                        name: 'Next',
                        onPressed: () {
                          if (provider.formKeySubmitDataBank.currentState!
                              .validate()) {
                            provider
                                .submitDataBank(
                              bankName: provider.ctrlBankName.text,
                              accountNumber: provider.ctrlNoAccountBank.text,
                              accountName: provider.ctrlNameAccountBank.text,
                            )
                                .then((values) {
                              provider.next(context).then((value) {
                                if (value) {
                                  routePush(context,
                                      page: const ConfirmBankAccount(),
                                      arguments: values);
                                }
                              });
                            });
                          }
                        },
                      )
                    ],
                  ),
                ),
              );
            }),
          );
        });
  }
}
