import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/button/back_button_view.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/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/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 PortfolioDetailView extends StatelessWidget {
  const PortfolioDetailView({super.key});

  @override
  Widget build(BuildContext context) {
    List<PortfolioProduct> listProduct = [
      PortfolioProduct(
          name: 'Gemilang Dana Kas Maxima',
          type: 'Money Market',
          yield: 8.17,
          priceUnit: 2600.79,
          funds: 6300000,
          totalUnit: 14520
      ),
      PortfolioProduct(
          name: 'Gemilang Dana Likuid',
          type: 'Sharia',
          yield: 6.42,
          priceUnit: 1600.79,
          funds: 2340000,
          totalUnit: 232,
      ),
      PortfolioProduct(
          name: 'Gemilang Income Fund',
          type: 'Bonds',
          yield: 8.17,
          priceUnit: 2600.79,
          funds: 6300000,
          totalUnit: 2450,
      )
    ];


    return ChangeNotifierProvider(
      create: (context) => RedeemProductViewModel(),
      child: Scaffold(
        backgroundColor: Colors.white,
        body: SizedBox(
          width: SizeConfig.width,
          height: SizeConfig.height,
          child: Stack(
            children: [
              const ImageView(image: PathAssets.imgDashboardAccount),
              Column(
                children: [
                  const SizedBox(
                    height: 50,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        const BackButtonView(),
                        const TextTitle(title: 'Education', color: Colors.white),
                        SizedBox(width: SizeConfig.width * 0.1,)
                      ],
                    ),
                  ),
                  const SizedBox(height: 24,),
                  const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 24),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('Portfolio Value',
                              style: TextStyle(
                                  color: ColorPalette.white,
                                  fontWeight: FontWeight.w400
                              ),
                            ),
                            TextTitle(title: 'Rp 2.000.000', fontSize: 14, color: Colors.white)
                          ],
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            Text('Advantages',
                              style: TextStyle(
                                  color: ColorPalette.white,
                                  fontWeight: FontWeight.w400
                              ),
                            ),
                            TextTitle(title: 'Rp 2.000.000', fontSize: 14, color: Colors.white)
                          ],
                        )
                      ],
                    ),
                  ),
                  const SizedBox(height: 24,),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        color: Colors.white,
                      ),
                      child: Consumer<RedeemProductViewModel>(
                        builder: (context, provider, child) {
                          return ListView(
                            padding: const EdgeInsets.all(24),
                            children: listProduct.asMap().entries.map((e) {
                              return cardPortfolio(context, e.value);
                            }).toList(),
                          );
                        }
                      ),
                    )
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget cardPortfolio(context, PortfolioProduct product) {
    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: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          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),
                    Container(
                      padding: const EdgeInsets.all(6),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(40),
                          color: ColorPalette.investTypeBgColor[product.type!]?.withOpacity(0.5) ?? Colors.white,
                          border: Border.all(width: 2, color: ColorPalette.investTypeColor[product.type!]?.withOpacity(0.4) ?? Colors.white)
                      ),
                      child: Text(
                        product.type ?? '',
                        style: TextStyle(
                            color: ColorPalette.investTypeColor[product.type!],
                            fontWeight: FontWeight.w600
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 16),
            child: Divider(height: 1, color: ColorPalette.slate200,),
          ),
          Wrap(
            runSpacing: 8,
            children: [
              rowDescription('Present Value', 'Rp2.660.706', fontWeight: FontWeight.w700),
              rowDescription('Investment Capital', 'Rp2.660.706'),
              rowDescription('Advantages', 'Rp2.660.706'),
              rowDescription('Purchase Price', NumberFormatter.numberCurrency(product.priceUnit, 'Rp ', 'id_ID')),
              rowDescription('Number of Units', '${product.totalUnit ?? 0}'),
            ],
          ),
          const SizedBox(height: 16,),
          Row(
            children: [
              Expanded(
                child: ButtonView(
                  name: 'Redeem',
                  marginVertical: 0,
                  width: SizeConfig.width,
                  isOutlined: true,
                  heightWrapContent: true,
                  contentPadding: const EdgeInsets.all(12),
                  backgroundColor: Colors.white,
                  borderColor: ColorPalette.red600,
                  textColor: ColorPalette.red600,
                  onPressed: () {
                    Provider.of<RedeemProductViewModel>(context, listen: false).setProduct(product);
                    showModalBottomSheet(
                      context: context,
                      isScrollControlled: true,
                      builder: (context) {
                        return RedeemProduct();
                      },
                    );
                  },
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: ButtonView(
                  name: 'Buy',
                  marginVertical: 0,
                  width: SizeConfig.width,
                  heightWrapContent: true,
                  contentPadding: const EdgeInsets.all(12),
                  onPressed: () {

                  },
                ),
              )
            ],
          )
        ],
      ),
    );
  }

  Widget rowDescription(String title, String value, {Color? color, FontWeight? fontWeight}) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(title,
          style: const TextStyle(
            color: ColorPalette.slate400,
            fontWeight: FontWeight.w600
          ),
        ),
        Text(value,
          style: TextStyle(
            color: color ?? ColorPalette.slate800,
            fontWeight: fontWeight ?? FontWeight.w600,
          ),
        )
      ],
    );
  }
}
