import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';

class EnergyConsumptionPage extends StatefulWidget {
  final List<dynamic> chartData;
  final double totalConsumption;
  final String date;
  final String formattedDate;
  final Widget widget;
  final Function()? onTap;

  const EnergyConsumptionPage({
    super.key,
    required this.chartData,
    required this.totalConsumption,
    required this.date,
    required this.widget,
    required this.onTap,
    required this.formattedDate,
  });

  @override
  _EnergyConsumptionPageState createState() => _EnergyConsumptionPageState();
}

class _EnergyConsumptionPageState extends State<EnergyConsumptionPage> {
  late List<dynamic> _chartData;

  @override
  void initState() {
    _chartData = widget.chartData;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: ColorsManager.whiteColors,
      child: Column(
        children: [
          const Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Total Consumption',
                style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 20,
                ),
              ),
              Text(
                '8623.20 kWh',
                style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 20,
                ),
              ),
            ],
          ),
          const Row(
            children: [
              Text(
                'Energy consumption',
                style: TextStyle(
                  color: ColorsManager.grayColor,
                  fontWeight: FontWeight.w700,
                  fontSize: 12,
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                widget.formattedDate,
                style: const TextStyle(
                  color: ColorsManager.grayColor,
                  fontWeight: FontWeight.w400,
                  fontSize: 8,
                ),
              ),
              const Text(
                '1000.00 kWh',
                style: TextStyle(
                  color: ColorsManager.grayColor,
                  fontWeight: FontWeight.w400,
                  fontSize: 8,
                ),
              ),
            ],
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: SizedBox(
                  height: MediaQuery.sizeOf(context).height * 0.09,
                  child: LineChart(
                    LineChartData(
                      lineTouchData: LineTouchData(
                          handleBuiltInTouches: true,
                          touchSpotThreshold: 2,
                          getTouchLineEnd: (barData, spotIndex) {
                            return 10.0;
                          },
                          touchTooltipData: LineTouchTooltipData(
                            getTooltipColor: (touchTooltipItem) => Colors.white,
                            tooltipRoundedRadius: 10.0,
                            tooltipPadding: const EdgeInsets.all(8.0),
                            tooltipBorder: const BorderSide(
                                color: ColorsManager.grayColor, width: 1),
                            getTooltipItems: (List<LineBarSpot> touchedSpots) {
                              return touchedSpots.map((spot) {
                                return LineTooltipItem(
                                  '${spot.x},\n ${spot.y.toStringAsFixed(2)} kWh',
                                  const TextStyle(
                                    color: Colors.blue,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 12,
                                  ),
                                );
                              }).toList();
                            },
                          )),
                      titlesData: FlTitlesData(
                        bottomTitles: const AxisTitles(
                          sideTitles: SideTitles(
                            showTitles: false,
                          ),
                        ),
                        leftTitles: const AxisTitles(
                          sideTitles: SideTitles(
                            showTitles: false,
                          ),
                        ),
                        rightTitles: const AxisTitles(
                          sideTitles: SideTitles(
                            showTitles: false,
                          ),
                        ),
                        topTitles: AxisTitles(
                          sideTitles: SideTitles(
                            showTitles: false,
                            reservedSize: 70,
                            getTitlesWidget: (value, meta) {
                              int index = value.toInt();
                              if (index >= 0 && index < _chartData.length) {
                                return Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: RotatedBox(
                                    quarterTurns: -1,
                                    child: Text(_chartData[index].time,
                                        style: const TextStyle(fontSize: 10)),
                                  ),
                                );
                              }
                              return const SizedBox.shrink();
                            },
                          ),
                        ),
                      ),
                      gridData: FlGridData(
                        show: true,
                        drawVerticalLine: true,
                        horizontalInterval: 1,
                        verticalInterval: 1,
                        getDrawingVerticalLine: (value) {
                          return FlLine(
                            color: Colors.grey.withOpacity(0.2),
                            dashArray: [8, 8],
                            strokeWidth: 1,
                          );
                        },
                        getDrawingHorizontalLine: (value) {
                          return FlLine(
                            color: Colors.grey.withOpacity(0.2),
                            dashArray: [5, 5],
                            strokeWidth: 1,
                          );
                        },
                        drawHorizontalLine: false,
                      ),
                      lineBarsData: [
                        LineChartBarData(
                          preventCurveOvershootingThreshold: 0.1,
                          curveSmoothness: 0.5,
                          preventCurveOverShooting: true,
                          aboveBarData: BarAreaData(),
                          spots: _chartData
                              .asMap()
                              .entries
                              .map((entry) => FlSpot(
                                  entry.key.toDouble(), entry.value.consumption))
                              .toList(),
                          isCurved: true,
                          color: ColorsManager.primaryColor.withOpacity(0.6),
                          show: true,
                          shadow: const Shadow(color: Colors.black12),
                          belowBarData: BarAreaData(
                            show: true,
                            gradient: LinearGradient(
                              colors: [
                                ColorsManager.primaryColor.withOpacity(0.5),
                                Colors.blue.withOpacity(0.1),
                              ],
                              begin: Alignment.center,
                              end: Alignment.bottomCenter,
                            ),
                          ),
                          dotData: const FlDotData(
                            show: false,
                          ),
                          isStrokeCapRound: true,
                          barWidth: 2,
                        ),
                      ],
                      borderData: FlBorderData(
                        show: false,
                        border: Border.all(
                          color: const Color(0xff023DFE).withOpacity(0.7),
                          width: 10,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(5.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          color: ColorsManager.graysColor,
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: Container(child: widget.widget),
                      ),
                    ),
                    const SizedBox(
                      width: 20,
                    ),
                    Expanded(
                      child: Container(
                        padding: const EdgeInsets.all(5.0),
                        decoration: BoxDecoration(
                          color: ColorsManager.graysColor,
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: InkWell(
                          onTap: widget.onTap,
                          child: Center(
                            child: Padding(
                              padding: const EdgeInsets.all(5),
                              child: Text(widget.date),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ],
      ),
    );
  }
}

class EnergyData {
  EnergyData(this.time, this.consumption);
  final String time;
  final double consumption;
}