import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:robo_advisory/providers/transaction_provider.dart';
import 'package:robo_advisory/providers/user_provider.dart';

class ExpensesChart extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ExpensesChartState();
}

class ExpensesChartState extends State {
  int? touchedIndex;

  @override
  Widget build(BuildContext context) {
    List<String> categories =
        Provider.of<UserProvider>(context, listen: true).categories;
    return Row(
      children: <Widget>[
        Expanded(
          child: PieChart(
            PieChartData(
                pieTouchData:
                    PieTouchData(touchCallback: (event, pieTouchResponse) {
                  if (pieTouchResponse == null) return;

                  setState(() {
                    if (event is FlLongPressEnd || event is FlPanEndEvent) {
                      touchedIndex = -1;
                    } else {
                      touchedIndex =
                          pieTouchResponse.touchedSection?.touchedSectionIndex;

                      if (touchedIndex != null) {
                        Provider.of<UserProvider>(context, listen: false)
                            .setSelectedTabIndex(3);
                        Provider.of<TransactionProvider>(context, listen: false)
                            .setSelectedCategory(categories[touchedIndex! + 1]);
                      }
                    }
                  });
                }),
                borderData: FlBorderData(
                  show: false,
                ),
                sectionsSpace: 1,
                centerSpaceRadius: 70,
                sections: showingSections()),
          ),
        ),
      ],
    );
  }

  List<PieChartSectionData> showingSections() {
    final colorsDict = [0xff0293ee, 0xfff8b250, 0xff13d38e, 0xff845bef];
    final values = [50.0, 12.0, 13.0, 25.0];

    return values
        .asMap()
        .entries
        .map((entry) => _pieChartSectionData(
            colorsDict[entry.key], entry.value, touchedIndex == entry.key))
        .toList();
  }

  PieChartSectionData _pieChartSectionData(
      int color, double value, bool isTouched) {
    final double fontSize = isTouched ? 25 : 16;
    final double radius = isTouched ? 60 : 50;

    return PieChartSectionData(
      color: Color(color),
      value: value,
      title: value.toString() + '%',
      radius: radius,
      titleStyle: TextStyle(
          fontSize: fontSize,
          fontWeight: FontWeight.bold,
          color: const Color(0xffffffff)),
    );
  }
}