import 'package:cims_apps/application/assets/path_assets.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/size_config.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/portfolio_detail_view.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class InvestmentType {
  String name;
  int value;
  int mutualFunds;

  InvestmentType(this.value, this.name, this.mutualFunds);
}

class PortofolioView extends StatefulWidget {
  const PortofolioView({super.key});

  @override
  State<PortofolioView> createState() => _PortofolioViewState();
}

class _PortofolioViewState extends State<PortofolioView> {
  List<Color> contentColor = [
    ColorPalette.purple500,
    ColorPalette.orange500,
    ColorPalette.cyan500,
    ColorPalette.green500,
  ];
  List<Color> bgContentColor = [
    ColorPalette.purple100,
    ColorPalette.orange100,
    ColorPalette.cyan100,
    ColorPalette.green100,
  ];

  bool seePortofolioValue = false;
  int touchedIndex = -1;

  List<InvestmentType> listInvestmentType = [
    InvestmentType(20, 'Money Market', 2),
    InvestmentType(15, 'Shares', 5),
    InvestmentType(8, 'Bonds', 3),
    InvestmentType(50, 'Sharia', 4),
  ];

  List<String> assetsImage = [
    PathAssets.iconPortofolioMoneyMarket,
    PathAssets.iconPortofolioShares,
    PathAssets.iconPortofolioBonds,
    PathAssets.iconPortofolioSharia,
  ];

  @override
  Widget build(BuildContext context) {
    return 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,
                ),
                const Center(
                  child: Text(
                    'Portfolio',
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.w700,
                        color: Colors.white),
                  ),
                ),
                const SizedBox(
                  height: 40,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 24),
                  child: portofolioValue(),
                ),
                Expanded(
                  child: Container(
                    margin: const EdgeInsets.only(top: 24),
                    decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(24),
                          topRight: Radius.circular(24)),
                    ),
                    child: ListView(
                      padding: const EdgeInsets.symmetric(vertical: 16),
                      children: [
                        Stack(alignment: Alignment.center, children: [
                          AspectRatio(
                            aspectRatio: 1.3,
                            child: PieChart(PieChartData(
                                pieTouchData: PieTouchData(
                                  touchCallback:
                                      (FlTouchEvent event, pieTouchResponse) {
                                    setState(() {
                                      if (!event.isInterestedForInteractions ||
                                          pieTouchResponse == null ||
                                          pieTouchResponse.touchedSection ==
                                              null) {
                                        touchedIndex = -1;
                                        return;
                                      }
                                      touchedIndex = pieTouchResponse
                                          .touchedSection!.touchedSectionIndex;
                                    });
                                  },
                                ),
                                borderData: FlBorderData(
                                  show: true,
                                ),
                                sectionsSpace: 20,
                                centerSpaceRadius: 110,
                                sections: sectionsDataPortofolio())),
                          ),
                          Column(
                            children: [
                              const Text(
                                'Total Mutual Fund',
                                style: TextStyle(
                                    fontWeight: FontWeight.w600,
                                    fontSize: 18,
                                    color: ColorPalette.slate400),
                              ),
                              Text(
                                  listInvestmentType
                                      .map((e) => e.mutualFunds)
                                      .reduce(
                                          (value, element) => value + element)
                                      .toString(),
                                  style: const TextStyle(
                                      fontSize: 44,
                                      fontWeight: FontWeight.w700)),
                            ],
                          )
                        ]),
                        const SizedBox(
                          height: 12,
                        ),
                        menuPortofolio(),
                        const SizedBox(
                          height: 12,
                        ),
                        const Padding(
                          padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              TextTitle(title: 'My Portfolio', fontSize: 16),
                              Row(
                                children: [
                                  Icon(Icons.add, size: 18, color: ColorPalette.primary),
                                  SizedBox(width: 4),
                                  const Text('Create',
                                    style: TextStyle(
                                      color: ColorPalette.primary,
                                      fontWeight: FontWeight.w600
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                        ),
                        // ...listColumnPortofolio(),
                        cardPortfolio()
                      ],
                    ),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget portofolioValue() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            const Text('Portfolio Value',
                style: TextStyle(color: Colors.white)),
            const SizedBox(
              width: 8,
            ),
            GestureDetector(
                onTap: () {
                  setState(() {
                    seePortofolioValue = !seePortofolioValue;
                  });
                },
                child: Icon(
                    seePortofolioValue
                        ? Icons.visibility_off_outlined
                        : Icons.visibility_outlined,
                    size: 18,
                    color: const Color(0xff93C5FD)))
          ],
        ),
        const SizedBox(
          height: 4,
        ),
        Row(
          children: [
            AnimatedCrossFade(
              duration: const Duration(milliseconds: 300),
              alignment: Alignment.center,
              crossFadeState: seePortofolioValue
                  ? CrossFadeState.showSecond
                  : CrossFadeState.showFirst,
              firstChild: RichText(
                  text: const TextSpan(
                      text: 'Rp ',
                      style: TextStyle(
                          fontSize: 32,
                          color: Color(0xff93C5FD),
                          fontFamily: 'Manrope'),
                      children: [
                    TextSpan(
                      text: '22.500.000',
                      style: TextStyle(
                          fontSize: 32,
                          fontFamily: 'Manrope',
                          fontWeight: FontWeight.bold,
                          color: Colors.white),
                    )
                  ])),
              secondChild: Padding(
                padding: const EdgeInsets.symmetric(vertical: 16),
                child: Wrap(
                  spacing: 7,
                  children: [
                    for (int i = 0; i < 6; i++)
                      Container(
                        width: 12,
                        height: 12,
                        decoration: const BoxDecoration(
                            color: Colors.white, shape: BoxShape.circle),
                      ),
                  ],
                ),
              ),
            ),
          ],
        )
      ],
    );
  }

  List<PieChartSectionData> sectionsDataPortofolio() {
    return listInvestmentType.asMap().entries.map((e) {
      final isTouched = e.key == touchedIndex;
      final radius = isTouched ? 40.0 : 30.0;
      return PieChartSectionData(
        color: contentColor[e.key],
        value: e.value.value.toDouble(),
        title: e.value.name,
        showTitle: isTouched,
        radius: radius,
        titleStyle: const TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      );
    }).toList();
  }

  Widget menuPortofolio() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 24),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: const BorderRadius.all(Radius.circular(12)),
          boxShadow: [
            BoxShadow(
                spreadRadius: 2,
                blurRadius: 8,
                color: const Color(0xff1E293B).withOpacity(0.04))
          ]),
      child: Wrap(
        alignment: WrapAlignment.center,
        spacing: 12,
        children: listInvestmentType.asMap().entries.map((e) {
          return Container(
            color: Colors.white,
            width: SizeConfig.width * 0.18,
            child: Column(
              children: [
                Container(
                  height: 58,
                  width: 58,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: bgContentColor[e.key],
                  ),
                  child: Text(
                    '${e.value.value}%',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: contentColor[e.key]),
                  ),
                ),
                const SizedBox(
                  height: 8,
                ),
                Text(
                  e.value.name,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                )
              ],
            ),
          );
        }).toList(),
      ),
    );
  }

  List<Widget> listColumnPortofolio() {
    return listInvestmentType.asMap().entries.map((e) {
      return Column(
        children: [
          if (e.key > 0) ...[
            const Divider(
              color: ColorPalette.slate200,
            )
          ],
          ListTile(
            contentPadding:
                const EdgeInsets.symmetric(vertical: 0, horizontal: 24),
            leading: ImageView(
              image: assetsImage[e.key],
              width: SizeConfig.width * .15,
              height: SizeConfig.height * .08,
              borderRadius: 8,
            ),
            title: Text(
              e.value.name,
              style: const TextStyle(fontWeight: FontWeight.w600),
            ),
            subtitle: Text(
              '${e.value.mutualFunds} Mutual Funds',
              style: const TextStyle(
                  fontWeight: FontWeight.w600, color: Color(0xff94A3B8)),
            ),
            trailing: const Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(
                  'Rp 2.000.000',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 16,
                      fontWeight: FontWeight.w700),
                ),
                Text(
                  '+ Rp 200.000',
                  style: TextStyle(
                      fontSize: 14,
                      color: Color(0xff4ADE80),
                      fontWeight: FontWeight.w600),
                )
              ],
            ),
          ),
        ],
      );
    }).toList();
  }

  Widget cardPortfolio() {
    return GestureDetector(
      onTap: () {
        routePush(context, page: const PortfolioDetailView());
      },
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 24),
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: ColorPalette.slate200)
        ),
        child: Column(
          children: [
            Row(
              children: [
                Container(
                    padding: const EdgeInsets.all(4),
                    decoration: BoxDecoration(
                        color: ColorPalette.blue200.withOpacity(0.5),
                        borderRadius: BorderRadius.circular(8)
                    ),
                    child: ImageView(
                        image: PathAssets.goalInvestIcon['Education'],
                        width: SizeConfig.width * 0.07
                    )
                ),
                const SizedBox(width: 8),
                const Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    TextTitle(title: 'Education', fontSize: 16,),
                    Text('2 Subscriptions',
                      style: TextStyle(
                        color: ColorPalette.slate400,
                        fontWeight: FontWeight.w600
                      ),
                    )
                  ],
                ),
              ],
            ),
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 8),
              child: Divider(height: 1, color: ColorPalette.slate200),
            ),
            const Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('Portfolio Value',
                      style: TextStyle(
                          color: ColorPalette.slate400,
                          fontWeight: FontWeight.w400
                      ),
                    ),
                    TextTitle(title: 'Rp 2.000.000', fontSize: 14,)
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text('Advantages',
                      style: TextStyle(
                          color: ColorPalette.slate400,
                          fontWeight: FontWeight.w400
                      ),
                    ),
                    TextTitle(title: 'Rp 2.000.000', fontSize: 14)
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}
