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/subscribe/total_payment_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/dashboard/dashboard_account/view/product/view_model/product_view_model.dart';
import 'package:flutter/material.dart';

class ResultOptionsProduct extends StatelessWidget {
  final int totalInvest;
  const ResultOptionsProduct({super.key, required this.totalInvest});

  @override
  Widget build(BuildContext context) {
    List<Product> listProduct = [
      Product(name: 'Gemilang Dana Kas Maxima', type: 'Money Market', totalPercent: 0.7),
      Product(name: 'Gemilang Dana Likuid', type: 'Bonds', totalPercent: 0.2),
      Product(name: 'Gemilang Kas 2 Kelas A', type: 'Shares', totalPercent: 0.1)
    ];

    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16)
      ),
      padding: const EdgeInsets.all(24),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.arrow_back, color: ColorPalette.slate500),
              Text('Results from your risk profile',
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 18,
                  color: ColorPalette.slate800
                ),
              ),
              Icon(Icons.close_rounded, color: ColorPalette.slate400)
            ],
          ),
          const SizedBox(height: 32),
          SingleChildScrollView(
            child: Column(
              children: listProduct.asMap().entries.map((e) {
                return Container(
                  margin: const EdgeInsets.only(bottom: 16),
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: ColorPalette.slate200),
                      borderRadius: BorderRadius.circular(12),
                      boxShadow: const [
                        BoxShadow(
                            color: Color(0XFF1E293B0A)
                        )
                      ]
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          const ImageView(image: PathAssets.iconGoogle, width: 30,),
                          const SizedBox(
                            width: 12,
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(e.value.name ?? '',
                                  style: const TextStyle(
                                    fontWeight: FontWeight.w700,
                                    color: ColorPalette.slate800,
                                  ),
                                ),
                                const SizedBox(height: 4,),
                                Container(
                                  padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
                                  decoration: BoxDecoration(
                                      border: Border.all(color: ColorPalette.investTypeColor[e.value.type]!),
                                      color: ColorPalette.investTypeBgColor[e.value.type],
                                      borderRadius: BorderRadius.circular(40)
                                  ),
                                  child: Text(e.value.type ?? '',
                                    style: TextStyle(
                                      color: ColorPalette.investTypeColor[e.value.type],
                                      fontWeight: FontWeight.w600,
                                      fontSize: 12
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          Text('${(e.value.totalPercent! * 100).toInt()} %',
                            style: const TextStyle(
                                fontWeight: FontWeight.w700,
                                fontSize: 16,
                                color: ColorPalette.slate800
                            ),
                          )
                        ],
                      ),
                      const Padding(
                        padding: EdgeInsets.symmetric(vertical: 16),
                        child: Divider(height: 1, color: ColorPalette.slate200),
                      ),
                      GestureDetector(
                        onTap: () {
                        },
                        child: const Text('See More',
                          style: TextStyle(
                            color: ColorPalette.slate500,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      )
                    ],
                  ),
                );
              }).toList(),
            ),
          ),
          const SizedBox(
            height: 16,
          ),
          ButtonView(
            name: 'Next',
            onPressed: () {
              showModalBottomSheet(
                  context: context,
                  isScrollControlled: true,
                  builder: (context) =>
                    TotalPaymentView(
                      listProduct: listProduct,
                      totalInvest: totalInvest,
                    )
              );
            },
            width: SizeConfig.width,
            heightWrapContent: true,
            contentPadding: const EdgeInsets.symmetric(vertical: 16),
            marginVertical: 0,
          )
        ],
      ),
    );
  }
}
