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:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:intl/intl.dart';

class ProductChartView extends StatefulWidget {
  final String tabType;
  final String lastTime;
  final List<double> dataChart;

  const ProductChartView({
    super.key,
    required this.tabType,
    required this.lastTime,
    required this.dataChart,
  });

  @override
  State<ProductChartView> createState() => _ProductChartViewState();
}

class _ProductChartViewState extends State<ProductChartView> {
  bool isShowLabel = true;
  DateTime dateTime = DateTime.now();
  double currentPrice = 0;
  int spotIndicator = 0;
  List<int> showingTooltipOnSpots = [1, 3, 5];
  List<FlSpot> spots = [];

  double dataHighest = 0;
  double dataLowest = 0;

  int indexHighestValue = 0;
  int indexLowestValue = 0;

  @override
  void initState() {
    spots = widget.dataChart.asMap().entries.map((e) {
      return FlSpot(double.parse(e.key.toString()), e.value);
    }).toList();
    dataHighest = widget.dataChart.reduce(max);
    dataLowest = widget.dataChart.reduce(min);
    currentPrice = dataHighest;
    indexHighestValue = widget.dataChart.indexWhere((element) => element == dataHighest);
    indexLowestValue = widget.dataChart.indexWhere((element) => element == dataLowest);
    // TODO: implement initState
    super.initState();
  }

  @override
  void didUpdateWidget(covariant ProductChartView oldWidget) {
    // TODO: implement didUpdateWidget
    spots = widget.dataChart.asMap().entries.map((e) {
      return FlSpot(double.parse(e.key.toString()), e.value);
    }).toList();
    dataHighest = widget.dataChart.reduce(max);
    dataLowest = widget.dataChart.reduce(min);
    currentPrice = dataHighest;
    indexHighestValue = widget.dataChart.indexWhere((element) => element == dataHighest);
    indexLowestValue = widget.dataChart.indexWhere((element) => element == dataLowest);
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Wrap(
            spacing: 8,
            children: [
              Text(
                widget.tabType,
                style: TextStyle(
                    color: ColorPalette.slate400,
                    fontWeight: FontWeight.w700
                ),
              ),
              Text(
                DateFormat('dd MMM yyyy').format(dateTime),
                style: TextStyle(
                    color: ColorPalette.slate300
                ),
              ),
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: TextTitle(title: NumberFormatter.numberCurrency(currentPrice, 'Rp ', 'id_ID')),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Wrap(
            crossAxisAlignment: WrapCrossAlignment.center,
            spacing: 8,
            children: [
              Icon(
                Icons.trending_up_outlined,
                size: 18,
                color: ColorPalette.green500,
              ),
              Text(
                'Rp20,30 (+3,88%)',
                style: TextStyle(
                  color: ColorPalette.green500,
                  fontWeight: FontWeight.w600
                ),
              ),
              Text(
                'Last ${widget.lastTime}',
                style: TextStyle(
                  color: ColorPalette.slate300,
                  fontWeight: FontWeight.w600
                ),
              )
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 48),
          child: AspectRatio(
            aspectRatio: 2.5,
            child: LayoutBuilder(
              builder: (context, constraints) {
                return LineChart(
                  LineChartData(
                    // showingTooltipIndicators: showingTooltipOnSpots.map((index) {
                    //   return ShowingTooltipIndicators([
                    //     LineBarSpot(
                    //       tooltipsOnBar,
                    //       lineBarsData.indexOf(tooltipsOnBar),
                    //       tooltipsOnBar.spots[index],
                    //     ),
                    //   ]);
                    // }).toList(),
                    extraLinesData: ExtraLinesData(
                        verticalLines: [
                          VerticalLine(
                              color: Colors.transparent,
                              x: indexHighestValue.toDouble(),
                              label: VerticalLineLabel(
                                show: spots.length < 7 ? false : isShowLabel,
                                padding: EdgeInsets.only(bottom: 20, top: -25),
                                alignment: (indexHighestValue / widget.dataChart.length) < 0.25 ? Alignment.topRight : (indexHighestValue / widget.dataChart.length) > 0.75 ? Alignment.topLeft : Alignment.topCenter,
                                style: const TextStyle(
                                  color: ColorPalette.slate400,
                                  fontSize: 12,
                                  fontWeight: FontWeight.bold,
                                ),
                                labelResolver: (p0) => NumberFormatter.numberCurrency(dataHighest, 'Rp ', 'id_ID'),
                              )
                          ),
                          VerticalLine(
                              color: Colors.transparent,
                              x: indexLowestValue.toDouble(),
                              label: VerticalLineLabel(
                                show: spots.length < 7 ? false : isShowLabel,
                                padding: EdgeInsets.only(bottom: -5, top: 20),
                                alignment: (indexLowestValue / widget.dataChart.length ) < 0.25 ? Alignment.bottomRight : (indexLowestValue / widget.dataChart.length ) > 0.75 ? Alignment.bottomLeft : Alignment.bottomCenter,
                                style: const TextStyle(
                                  color: ColorPalette.slate400,
                                  fontSize: 12,
                                  fontWeight: FontWeight.bold,
                                ),
                                labelResolver: (p0) => NumberFormatter.numberCurrency(dataLowest, 'Rp ', 'id_ID'),
                              )
                          )
                        ]
                    ),
                    lineTouchData: LineTouchData(
                      getTouchLineEnd: (barData, spotIndex) => double.infinity,
                      getTouchedSpotIndicator: (barData, spotIndexes) {
                        return spotIndexes.map((spotIndex) {
                          return TouchedSpotIndicatorData(
                            const FlLine(strokeWidth: 1, color: ColorPalette.primary),
                            FlDotData(
                              getDotPainter: (spot, percent, barData, index) =>
                                  FlDotCirclePainter(
                                    radius: 1,
                                    color: ColorPalette.white,
                                    strokeColor: ColorPalette.primary,
                                    strokeWidth: 2,
                                  ),
                            ),
                          );
                        }).toList();
                      },
                      touchCallback: (FlTouchEvent event, LineTouchResponse? response) {
                        if (response == null || response.lineBarSpots == null) {
                          setState(() {
                            isShowLabel = true;
                            currentPrice = widget.dataChart.last;
                            dateTime = DateTime.now();
                          });
                          return;
                        }
                        double? spotIndex = response.lineBarSpots?[0].x;
                        if(spotIndex != null){
                          int absIndex = (spotIndex.toInt() - (spots.length - 1)).abs();
                          setState(() {
                            isShowLabel = false;
                            spotIndicator = spotIndex.toInt();
                            currentPrice = widget.dataChart[spotIndex.toInt()];
                            dateTime = DateTime.now().subtract(Duration(days: absIndex));
                          });
                        }
                      },
                      touchTooltipData: LineTouchTooltipData(
                        tooltipBgColor: Colors.transparent,
                        tooltipPadding: EdgeInsets.all(0),
                        fitInsideHorizontally: true,
                        showOnTopOfTheChartBoxArea: true,
                        getTooltipItems: (touchedSpots) {
                          return touchedSpots.map((LineBarSpot touchedSpot) {
                            final textStyle = TextStyle(
                              color: ColorPalette.slate500,
                              fontWeight: FontWeight.bold,
                              fontSize: 12,
                            );
                            return LineTooltipItem(
                              DateFormat('dd MMM yyyy').format(dateTime),
                              textStyle,
                            );
                          }).toList();
                        },
                      ),
                      handleBuiltInTouches: true,
                    ),
                    lineBarsData: [
                      LineChartBarData(
                        color: ColorPalette.primary,
                        spots: spots,
                        isCurved: true,
                        preventCurveOverShooting: true,
                        isStrokeCapRound: true,
                        isStrokeJoinRound: true,
                        barWidth: 1.2,
                        belowBarData: BarAreaData(
                          show: true,
                          gradient: LinearGradient(
                              begin: Alignment.topCenter,
                              end: Alignment.bottomCenter,
                              colors: [
                                Color(0xFF5B8FF9),
                                Colors.white
                              ]
                          ),
                          spotsLine: BarAreaSpotsLine(
                            show: true,
                            applyCutOffY: true,
                            flLineStyle: FlLine(
                              color: ColorPalette.primary,
                              strokeWidth: 1,
                            ),
                            checkToShowSpotLine: (spot) {
                              if(spot.x == spotIndicator && !isShowLabel){
                                return true;
                              }
                              return false;
                            },
                          )
                        ),
                        dotData: FlDotData(
                          show: true,
                          getDotPainter: (p0, p1, p2, p3) {
                            return  FlDotCirclePainter(
                              radius: 1,
                              color: ColorPalette.white,
                              strokeColor: ColorPalette.primary,
                              strokeWidth: 2,
                            );
                          },
                          checkToShowDot: (spot, barData) {
                            if(spot.x == spotIndicator && !isShowLabel){
                              return true;
                            }
                            return false;
                          },
                        ),
                      ),
                    ],
                    titlesData: FlTitlesData(
                      leftTitles: AxisTitles(
                        sideTitles: SideTitles(
                          showTitles: false,
                          reservedSize: 56,
                        ),
                        drawBelowEverything: true,
                      ),
                      rightTitles: const AxisTitles(
                        sideTitles: SideTitles(showTitles: false),
                      ),
                      bottomTitles: AxisTitles(
                        sideTitles: SideTitles(
                          showTitles: false,
                          reservedSize: 36,
                          interval: 1,
                        ),
                        drawBelowEverything: true,
                      ),
                      topTitles: const AxisTitles(
                        sideTitles: SideTitles(showTitles: false),
                      ),
                    ),
                    gridData: FlGridData(
                        show: false
                    ),
                    borderData: FlBorderData(show: false),
                  ),
                );
              },
            ),
          ),
        ),
      ],
    );
  }
}
