import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/redeem_product.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view_model/redeem_product_view_model.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    List<Account> listAccount = [
      Account('Muhamad Rosyidin', 'BRI', '902139012324'),
      Account('Achmad Muhaimin', 'BCA', '21391283928')
    ];

    return ChangeNotifierProvider(
      create: (context) => RedeemProductViewModel(),
      child: Consumer<RedeemProductViewModel>(
        builder: (context, provider, child) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                      onTap: () {
                        Navigator.pop(context);
                        showModalBottomSheet(
                          context: context,
                          isScrollControlled: true,
                          builder: (context) {
                            return const RedeemProduct();
                          },
                        );
                      },
                      child: const Icon(Icons.arrow_back_rounded)
                    ),
                    const Text('Change Destination Account',
                      style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 16,
                        color: ColorPalette.slate800
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: const Icon(Icons.close_rounded)
                    )
                  ],
                ),
              ),
              const Divider(height: 1, color: ColorPalette.slate200,),
              Padding(
                padding: const EdgeInsets.all(24),
                child: Column(
                  children: [
                    ...listAccount.asMap().entries.map((e) {
                      return GestureDetector(
                        onTap: () => provider.setSelectedAcc(e.value),
                        child: Padding(
                          padding: EdgeInsets.only(top: e.key != 0 ? 16 : 0),
                          child: cardAccount(e.value, provider.selectedAccount?.number ?? provider.getCurrentAccount.number),
                        ),
                      );
                    }),
                    const SizedBox(height: 24),
                    GestureDetector(
                      child: const Row(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(Icons.add, size: 24, color: ColorPalette.primary),
                          SizedBox(width: 12,),
                          Text('New Bank',
                            style: TextStyle(
                                color: ColorPalette.primary,
                                fontSize: 20,
                                fontWeight: FontWeight.w600
                            ),
                          )
                        ],
                      ),
                    ),
                    const SizedBox(height: 32),
                    ButtonView(
                      name: 'Save',
                      textSize: 20,
                      marginVertical: 0,
                      onPressed: () {
                        Navigator.pop(context);
                        showModalBottomSheet(
                          context: context,
                          isScrollControlled: true,
                          builder: (context) {
                            provider.setCurrentAcc(provider.selectedAccount!);
                            return const RedeemProduct();
                          },
                        );
                      },
                    )
                  ],
                ),
              ),
            ],
          );
        }
      ),
    );
  }

  Widget cardAccount(Account account, String numberSelected) {
    List<String> listNumber = [];

    List.generate(account.number.length, (index) {
      if(index > 3 && index < account.number.length - 4){
        listNumber.add('*');
      }else{
        listNumber.add(account.number[index]);
      }
    });

    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(14),
          border: Border.all(color: ColorPalette.slate200)
      ),
      child: Row(
        children: [
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(account.nameOwner,
                      style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          color: ColorPalette.slate800
                      ),
                    ),
                    Text(
                      '${account.nameBank} - ${listNumber.join("")}',
                      style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          color: ColorPalette.slate400
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
          AnimatedContainer(
            margin: const EdgeInsets.only(top: 4),
            duration: const Duration(milliseconds: 200),
            height: 16,
            width: 16,
            padding: const EdgeInsets.all(1),
            alignment: Alignment.center,
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(
                    color: numberSelected == account.number
                        ? ColorPalette.primary
                        : ColorPalette.slate200)),
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 200),
              child: Container(
                decoration: BoxDecoration(
                    color:
                    numberSelected == account.number ? ColorPalette.primary : ColorPalette.white,
                    shape: BoxShape.circle),
              ),
            ),
          )
        ],
      ),
    );
  }
}
