import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/component/radio_agreement.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/number_formatter.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view/step_subscribe/payment_method_view.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view_model/product_view_model.dart';
import 'package:flutter/material.dart';

class TotalPaymentView extends StatelessWidget {
  final int totalInvest;
  final List<Product> listProduct;
  final bool isAgree;
  final void Function() onTapAgree;
  const TotalPaymentView({
    super.key,
    required this.listProduct,
    required this.totalInvest,
    required this.isAgree,
    required this.onTapAgree,
  });

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(16)),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.all(24.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(
                    'Your Investment Today',
                    style: TextStyle(
                        color: ColorPalette.slate800,
                        fontWeight: FontWeight.w600,
                        fontSize: 16),
                  ),
                  GestureDetector(
                      onTap: () => Navigator.pop(context),
                      child: const Icon(Icons.close_rounded))
                ],
              ),
            ),
            ...listProduct.asMap().entries.map((e) {
              return Container(
                padding: const EdgeInsets.only(
                    left: 16, right: 24, bottom: 16, top: 16),
                decoration: BoxDecoration(
                    border: Border(
                        left: BorderSide(
                            width: 8,
                            color:
                                ColorPalette.investTypeColor[e.value.type]!))),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                        flex: 5,
                        child: Text(
                          e.value.name ?? '',
                          style: const TextStyle(
                              color: ColorPalette.slate400,
                              fontWeight: FontWeight.w600,
                              fontSize: 16),
                        )),
                    Expanded(
                        flex: 7,
                        child: Text(
                          NumberFormatter.numberCurrency(
                              totalInvest * e.value.totalPercent!,
                              'Rp ',
                              'id_ID'),
                          textAlign: TextAlign.end,
                          style: const TextStyle(
                              fontWeight: FontWeight.w700,
                              fontSize: 18,
                              color: ColorPalette.slate800),
                        ))
                  ],
                ),
              );
            }).toList(),
            const SizedBox(height: 16),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 24),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Purchase Commission',
                    style: TextStyle(
                        color: ColorPalette.slate400,
                        fontWeight: FontWeight.w600,
                        fontSize: 16),
                  ),
                  Text(
                    'Free',
                    style: TextStyle(
                        color: ColorPalette.primary,
                        fontSize: 18,
                        fontWeight: FontWeight.w700),
                  )
                ],
              ),
            ),
            const SizedBox(
              height: 16,
            ),
            Container(
              color: ColorPalette.slate200.withOpacity(0.5),
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(
                    'Total',
                    style: TextStyle(
                        color: ColorPalette.slate400,
                        fontWeight: FontWeight.w600,
                        fontSize: 16),
                  ),
                  Text(
                    NumberFormatter.numberCurrency(
                        totalInvest, 'Rp ', 'id_ID'),
                    textAlign: TextAlign.end,
                    style: const TextStyle(
                        fontWeight: FontWeight.w700,
                        fontSize: 18,
                        color: ColorPalette.slate800),
                  )
                ],
              ),
            ),
            RadioAgreement(
              isAgree: isAgree,
              desc: 'I agree to buy the mutual fund on this page and have read and agreed to all the contents of the Prospectus and summary information and understand the risks of my investment decision.',
              onTap: () {
                onTapAgree();
              },
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(
                    'Total Payment',
                    style: TextStyle(
                        color: ColorPalette.slate400,
                        fontWeight: FontWeight.w600,
                        fontSize: 16),
                  ),
                  Text(
                    NumberFormatter.numberCurrency(
                        totalInvest, 'Rp ', 'id_ID'),
                    textAlign: TextAlign.end,
                    style: const TextStyle(
                        fontWeight: FontWeight.w700,
                        fontSize: 18,
                        color: ColorPalette.slate800),
                  )
                ],
              ),
            ),
            ButtonView(
              disabled: !isAgree,
              name: 'Subscribe Now',
              onPressed: () {
                routePush(context,
                    page: PaymentMethodView(
                      totalInvest: totalInvest,
                    ));
              },
              disabledBgColor: ColorPalette.slate200.withOpacity(0.5),
              textColor: isAgree ? Colors.white : ColorPalette.slate400,
              textWeight: FontWeight.w700,
              textSize: 20,
              backgroundColor: ColorPalette.primary,
            )
          ],
        ),
      ),
    );
  }

  // Widget buttonAgreement() {
  //   return Padding(
  //     padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
  //     child: Row(
  //       crossAxisAlignment: CrossAxisAlignment.start,
  //       children: [
  //         GestureDetector(
  //           onTap: () {
  //           },
  //           child: 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: isAgree
  //                         ? ColorPalette.primary
  //                         : ColorPalette.slate200)),
  //             child: AnimatedContainer(
  //               duration: const Duration(milliseconds: 200),
  //               child: Container(
  //                 decoration: BoxDecoration(
  //                     color:
  //                         isAgree ? ColorPalette.primary : ColorPalette.white,
  //                     shape: BoxShape.circle),
  //               ),
  //             ),
  //           ),
  //         ),
  //         const SizedBox(
  //           width: 12,
  //         ),
  //         Expanded(
  //             child: Column(
  //           crossAxisAlignment: CrossAxisAlignment.start,
  //           children: [
  //             const Text(
  //               'I agree to buy the mutual fund on this page and have read and agreed to all the contents of the Prospectus and summary information and understand the risks of my investment decision.',
  //               style: TextStyle(
  //                   fontSize: 16,
  //                   fontWeight: FontWeight.w600,
  //                   color: ColorPalette.slate400),
  //             ),
  //             GestureDetector(
  //                 onTap: () {},
  //                 child: const Text(
  //                   'Read More',
  //                   style: TextStyle(
  //                       fontSize: 16,
  //                       fontWeight: FontWeight.w600,
  //                       decoration: TextDecoration.underline,
  //                       color: ColorPalette.primary),
  //                 ))
  //           ],
  //         ))
  //       ],
  //     ),
  //   );
  // }
}
