import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class LineGraph extends ConsumerStatefulWidget {
  final lines = [
    [0, 1, 0, 1, 0, 1, 0],
    [1, 0, 1, 0, 1, 0, 1],
  ];

  LineGraph({super.key});

  @override
  ConsumerState<LineGraph> createState() => LineGraphState();
}

class LineGraphState extends ConsumerState<LineGraph> {
  final weekDays = ["L", "M", "X", "J", "V", "S", "D"];
  String? timeSpan;
  late var days = weekDays;

  @override
  void initState() {
    timeSpan = "week";
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final theme = ref.watch(themePortProvider);

    return Container(
      padding: EdgeInsets.all(15),
      decoration: BoxDecoration(
        border: BoxBorder.fromLTRB(
          left: BorderSide(color: Colors.cyan, width: 5),
        ),
        borderRadius: BorderRadius.all(Radius.circular(20)),
        color: theme.getColorFor(ThemeCode.backgroundPrimary),
      ),
      child: Column(
        spacing: 10,
        children: [
          Row(
            children: [
              Text("Gastos", style: TextStyle(fontWeight: FontWeight.bold)),
              Spacer(),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  color: theme.getColorFor(ThemeCode.backgroundSecondary),
                ),
                child: DropdownButton(
                  underline: Container(),
                  value: timeSpan,
                  onChanged: (String? value) {
                    setState(() {
                      timeSpan = value;
                    });
                  },
                  dropdownColor: theme.getColorFor(ThemeCode.backgroundPrimary),
                  items: [
                    DropdownMenuItem(value: "day", child: Text("Hoy")),
                    DropdownMenuItem(value: "week", child: Text("Esta semana")),
                    DropdownMenuItem(value: "month", child: Text("Este mes")),
                  ],
                ),
              ),
            ],
          ),
          Expanded(
            child: LineChart(
              LineChartData(
                gridData: FlGridData(
                  show: true,
                  drawHorizontalLine: false,
                  drawVerticalLine: true,
                  verticalInterval: 1,
                ),
                titlesData: FlTitlesData(
                  //show: false,
                  bottomTitles: AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: true,
                      reservedSize: 40,
                      getTitlesWidget: (double value, TitleMeta meta) =>
                          SideTitleWidget(
                            space: 4,
                            meta: meta,
                            /*fitInside: fitInsideBottomTitle
                        ? SideTitleFitInsideData.fromTitleMeta(meta, distanceFromEdge: 0)
                        : SideTitleFitInsideData.disable(),*/
                            child: Text(weekDays[value.toInt()]),
                          ),
                    ),
                  ),
                  leftTitles: AxisTitles(),
                  topTitles: AxisTitles(),
                  rightTitles: AxisTitles(),
                ),
                lineTouchData: LineTouchData(
                  touchTooltipData: LineTouchTooltipData(
                    getTooltipColor: (touchedSpot) =>
                        theme.getColorFor(ThemeCode.buttonSecondary),
                    getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
                      return touchedBarSpots.map((barSpot) {
                        return LineTooltipItem(
                          "${barSpot.y} €",
                          TextStyle(
                            color: theme.getColorFor(ThemeCode.textSecondary),
                          ),
                        );
                      }).toList();
                    },
                  ),
                ),
                borderData: FlBorderData(
                  show: true,
                  border: Border(
                    bottom: BorderSide(
                      color: Colors.lightBlue.withValues(alpha: 0.2),
                      width: 4,
                    ),
                    left: const BorderSide(color: Colors.transparent),
                    right: const BorderSide(color: Colors.transparent),
                    top: const BorderSide(color: Colors.transparent),
                  ),
                ),
                lineBarsData: [
                  LineChartBarData(
                    isCurved: true,
                    color: Colors.pink,
                    barWidth: 5,
                    isStrokeCapRound: true,
                    dotData: const FlDotData(show: false),
                    belowBarData: BarAreaData(show: false),
                    spots: const [
                      FlSpot(0, 1),
                      FlSpot(1, 0),
                      FlSpot(2, 1),
                      FlSpot(3, 0),
                      FlSpot(4, 1),
                      FlSpot(5, 0),
                      FlSpot(6, 1),
                    ],
                  ),
                  LineChartBarData(
                    isCurved: true,
                    color: Colors.cyan,
                    barWidth: 5,
                    isStrokeCapRound: true,
                    dotData: const FlDotData(show: false),
                    belowBarData: BarAreaData(show: false),
                    spots: const [
                      FlSpot(0, 0),
                      FlSpot(1, 1),
                      FlSpot(2, 0),
                      FlSpot(3, 1),
                      FlSpot(4, 0),
                      FlSpot(5, 1),
                      FlSpot(6, 0),
                    ],
                  ),
                ],
                minX: 0,
                maxX: days.length - 1,
                maxY: 1,
                minY: 0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}