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/radio_agreement.dart';
import 'package:cims_apps/application/component/text_title/text_title.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/number_formatter.dart';
import 'package:cims_apps/core/utils/size_config.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 TotalRedeem extends StatelessWidget {
  const TotalRedeem({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => RedeemProductViewModel(),
      child: Consumer<RedeemProductViewModel>(
        builder: (context, provider, child) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const Text('Investment Funds that You Cash Out',
                      style: TextStyle(
                          fontWeight: FontWeight.w600,
                          color: ColorPalette.slate800,
                          fontSize: 16
                      ),
                    ),
                    GestureDetector(
                        onTap: () => Navigator.pop(context),
                        child: const Icon(Icons.close_rounded, color: ColorPalette.slate800,)
                    )
                  ],
                ),
              ),
              const Divider(height: 1, color: ColorPalette.slate200,),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
                child: cardProduct(provider.getCurrentProduct, provider.getUnit!),
              ),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 24),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Sales Commission',
                      style: TextStyle(
                        color: ColorPalette.slate400,
                        fontSize: 16
                      ),
                    ),
                    Text('Free',
                      style: TextStyle(
                        fontWeight: FontWeight.w600,
                        color: ColorPalette.primary,
                        fontSize: 16
                      ),
                    )
                  ],
                ),
              ),
              const SizedBox(height: 16),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 24),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Cash Out Method',
                      style: TextStyle(
                          color: ColorPalette.slate400,
                          fontSize: 16
                      ),
                    ),
                    Text('Regular',
                      style: TextStyle(
                          fontWeight: FontWeight.w600,
                          color: ColorPalette.primary,
                          fontSize: 16
                      ),
                    )
                  ],
                ),
              ),
              const SizedBox(height: 16,),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
                color: ColorPalette.slate200.withOpacity(0.5),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: TextTitle(
                        title: 'Estimated Funds Disbursed',
                        color: ColorPalette.slate500,
                        fontSize: 16,
                      )
                    ),
                    Expanded(
                      child: Text(
                        NumberFormatter.numberCurrency((provider.getCurrentProduct.priceUnit! * provider.getUnit!).toInt(), 'Rp ', 'id_ID', decimalDigits: 0),
                        textAlign: TextAlign.end,
                        style: TextStyle(
                          color: ColorPalette.slate800,
                          fontWeight: FontWeight.w700,
                          fontSize: 18
                        ),
                      )
                    )
                  ],
                ),
              ),
              RadioAgreement(
                isAgree: provider.isAgree,
                desc: 'I agree to the sale of the mutual funds listed on this page. I understand that the total funds disbursed are approximate. The amount received may change according to the closing price of the mutual fund on the day of sale.',
                onTap: provider.setAgree
              ),
              const SizedBox(height: 24),
              ButtonView(
                disabled: !provider.isAgree,
                name: 'Redeem',
                textSize: 20,
                marginVertical: 0,
                disabledBgColor: ColorPalette.slate200.withOpacity(0.5),
                textColor: !provider.isAgree ? ColorPalette.slate400 : Colors.white,
                onPressed: () {
                  Navigator.pop(context);
                  showModalBottomSheet(
                    context: context,
                    isScrollControlled: true,
                    builder: (context) {
                      return TotalRedeem();
                    },
                  );
                },
              ),
              const SizedBox(height: 24)
            ],
          );
        }
      ),
    );
  }

  Widget cardProduct(PortfolioProduct product, double currentUnit) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: ColorPalette.slate200),
          boxShadow: [
            BoxShadow(
                color: const Color(0xff1E293B).withOpacity(0.04),
                blurRadius: 8,
                spreadRadius: 2
            )
          ]
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ImageView(
            image: PathAssets.imgProduct,
            width: SizeConfig.width * .13,
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                TextTitle(title: product.name ?? '', fontSize: 16,),
                const SizedBox(height: 4),
                Row(
                  children: [
                    Text(currentUnit.toStringAsFixed(2).replaceAll('.', ','),
                      style: const TextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: 18,
                          color: ColorPalette.slate800
                      ),
                    ),
                    const Text(' unit',
                      style: TextStyle(
                          fontWeight: FontWeight.w600,
                          color: ColorPalette.slate400
                      ),
                    )
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
