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/custom_app_bar/custom_app_bar.dart';
import 'package:cims_apps/application/component/image/image_view.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/utils/size_config.dart';
import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ListBankView extends StatelessWidget {
  final ValueChanged<String> onSelect;
  const ListBankView({Key? key, required this.onSelect}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var textTheme = Theme.of(context).textTheme;

    return ChangeNotifierProvider(
        create: (context) => SubmissionDataViewModel(),
        builder: (context, child) {
          return Scaffold(
            appBar: CustomAppBar(
                height: SizeConfig.height * .1, title: 'Select Bank'),
            body: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Consumer<SubmissionDataViewModel>(
                  builder: (context, provider, child) {
                return Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        ImageView(
                          image: PathAssets.imgGuideBank,
                          width: SizeConfig.width * .35,
                        ),
                        Expanded(
                          child: Text(
                            'Make sure the bank you choose is a bank account in your own name ',
                            style: textTheme.bodyLarge,
                          ),
                        )
                      ],
                    ),
                    TextFormView(
                      name: '',
                      hintText: 'Search bank',
                      ctrl: provider.ctrlBankNameSearch,
                      contentPadding: const EdgeInsets.symmetric(vertical: 0),
                      prefixIcon: const Icon(
                        Icons.search,
                        color: ColorPalette.slate500,
                      ),
                    ),
                    Expanded(
                      child: SingleChildScrollView(
                        child: Column(
                          children: provider.listBank.asMap().entries.map((e) {
                            bool selectedBank =
                                e.key.toString() == provider.idx;
                            return Card(
                              elevation: 0,
                              color: selectedBank
                                  ? ColorPalette.blue50
                                  : Colors.white,
                              shape: const RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(12)),
                              ),
                              child: ListTile(
                                title: Text(
                                  e.value.text,
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                    color: selectedBank
                                        ? ColorPalette.primary
                                        : ColorPalette.slate500,
                                  ),
                                ),
                                onTap: () {
                                  provider.changeBank(e.key.toString());
                                  provider.selectBank(e.value.text);
                                },
                              ),
                            );
                          }).toList(),
                        ),
                      ),
                    ),
                    ButtonView(
                      name: 'Select',
                      marginVertical: 8.0,
                      onPressed: () {
                        onSelect(provider.valueBank);
                        Navigator.pop(context);
                      },
                    ),
                  ],
                );
              }),
            ),
          );
        });
  }
}
