import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/button/button_back.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/route/route.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/product/product_view.dart';
import 'package:flutter/material.dart';

class Product {
  String name;
  double yield;
  double priceUnit;
  double funds;
  
  Product(this.name, this.yield, this.priceUnit, this.funds);
}

class InvestTypeView extends StatefulWidget {
  final String title;
  const InvestTypeView(this.title, {super.key});

  @override
  State<InvestTypeView> createState() => _InvestTypeViewState();
}

class _InvestTypeViewState extends State<InvestTypeView> {
  
  List<Product> listProduct = [
    Product('Gemilang Dana Kas Maxima', 8.17, 2600.79, 6300000),
    Product('Gemilang Dana Likuid', 6.42, 1600.79, 2340000),
    Product('Gemilang Income Fund', 8.17, 2600.79, 6300000)
  ];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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 ButtonBack(),
                      TextTitle(title: widget.title, color: Colors.white),
                      SizedBox(
                        width: SizeConfig.width * 0.1,
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  height: 24,
                ),
                Container(
                  padding: const EdgeInsets.all(24),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    color: Colors.white
                  ),
                  child: Column(
                    children: [
                      filters(),
                      ListView(
                        shrinkWrap: true,
                        children: listProduct.asMap().entries.map((e) {
                          return GestureDetector(
                            onTap: () {
                              routePush(context, page: ProductView(widget.title));
                            },
                            child: Padding(
                              padding: EdgeInsets.only(top: e.key != 0 ? 24 : 0),
                              child: cardProduct(e.value),
                            ),
                          );
                        }).toList(),
                      )
                    ],
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget filters() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          segmentFilter(const Icon(Icons.filter_alt_outlined, color: ColorPalette.slate400,), 'Filter', () { }),
          segmentFilter(const RotatedBox(quarterTurns: 1, child: Icon(Icons.compare_arrows, color: ColorPalette.slate400)), 'Sort', () { }),
          segmentFilter(const Icon(Icons.dashboard_outlined, color: ColorPalette.slate400), 'Compare', () { }),
        ],
      ),
    );
  }

  Widget segmentFilter(Widget leading, String text, void Function()? onTap) {
    return GestureDetector(
      onTap: onTap,
      child:  Container(
        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        decoration: BoxDecoration(
            border: Border.all(color: ColorPalette.slate200),
            borderRadius: BorderRadius.circular(56)
        ),
        child: Row(
          children: [
            leading,
            const SizedBox(
              width: 4,
            ),
            Text(
              text,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(
                color: ColorPalette.slate500,
                fontWeight: FontWeight.w700
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget cardProduct(Product product) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: ColorPalette.slate200),
      ),
      child: Column(
        children: [
          Row(
            children: [
              ImageView(image: PathAssets.imgProduct, width: SizeConfig.width * .12,),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: Text(
                  product.name,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18
                  ),
                ),
              )
            ],
          ),
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 12),
            child: Divider(color: ColorPalette.slate200),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                children: [
                  const Text('Yield', style: TextStyle(color: ColorPalette.slate400, fontWeight: FontWeight.w600),),
                  Row(
                    children: [
                      Text(
                        '${product.yield.toString()}%',
                        style: const TextStyle(
                          color: ColorPalette.green400,
                          fontWeight: FontWeight.w600
                        ),
                      ),
                      const Text('/'),
                      const Text('3year', style: TextStyle(color: ColorPalette.slate400, fontWeight: FontWeight.w600),)
                    ],
                  )
                ],
              ),
              Column(
                children: [
                  const Text('Price/unit', style: TextStyle(color: ColorPalette.slate400, fontWeight: FontWeight.w600),),
                  Row(
                    children: [
                      const Icon(Icons.trending_up_outlined, size: 18, color: ColorPalette.green400,),
                      const SizedBox(
                        width: 2,
                      ),
                      Text(
                        NumberFormatter.numberCurrency(product.priceUnit, 'Rp', 'id_ID'),
                        style: const TextStyle(
                          fontWeight: FontWeight.w600
                        ),
                      ),
                    ],
                  )
                ],
              ),
              Column(
                children: [
                  const Text('Managed funds', style: TextStyle(color: ColorPalette.slate400, fontWeight: FontWeight.w600),),
                  Row(
                    children: [
                      Text(
                        NumberFormatter.compactCurrency(product.funds, 'Rp ', 'id_ID'),
                        style: const TextStyle(
                            fontWeight: FontWeight.w600
                        ),
                      ),
                    ],
                  )
                ],
              )
            ],
          )
        ],
      ),
    );
  }

}
