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

class KidLineChart extends ConsumerWidget{
  final int index;
  final Kid kid;

  final weekDays = const ["L", "M", "X", "J", "V", "S", "D"];

  const KidLineChart({
    super.key,
    required this.kid,
    this.index = 0
  });

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

    return Container(
      width: 183,
      padding: EdgeInsets.all(24),
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: theme.getCardColorFor(index)),
        borderRadius: BorderRadius.all(Radius.circular(16)),
      ),
      child: Column(
        spacing: 16,
        children: [
          Row(
            spacing: 16,
            children: [
              SizedBox(
                height: 50,
                width: 50,
                child: SvgPicture.asset("assets/images/ui/face.svg"),
              ),
              Column(children: [
                Text(
                  kid.name,
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontWeight: FontWeight.w500,
                    fontSize: 16,
                    color: theme.getColorFor(ThemeCode.textSecondary)
                  )
                ),
                MoneyText(
                  text: "${kid.balance}€",
                  size: 26,
                  secondarySize: 16,
                  color: theme.getColorFor(ThemeCode.textSecondary)
                )
              ])
            ],
          ),
          SizedBox(
            height: 93,
            child: LineChart(LineChartData(
              gridData: FlGridData(
                show: true,
                drawHorizontalLine: false,
                drawVerticalLine: true,
                verticalInterval: 1,
                getDrawingVerticalLine: (value)=>FlLine(strokeWidth: 12, color: Colors.black26)
              ),
              titlesData: FlTitlesData(
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    interval: 1,
                    showTitles: true,
                    reservedSize: 29,
                    getTitlesWidget: (double value, TitleMeta meta){
                      String text = weekDays[value.toInt()];

                      return SideTitleWidget(
                        space: 4,
                        meta: meta,
                        child: Expanded(
                          child: Center(
                            child: Text(
                              text,
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w500,
                                color: theme.getColorFor(ThemeCode.textSecondary)
                              )
                            )
                          )
                        ),
                      );
                    },
                  ),
                ),
                leftTitles: AxisTitles(),
                topTitles: AxisTitles(),
                rightTitles: AxisTitles()
              ),
              lineTouchData: LineTouchData(
                touchTooltipData: LineTouchTooltipData(
                  tooltipBorderRadius: BorderRadius.all(Radius.circular(7)),
                  getTooltipColor: (spot) => theme.getColorFor(ThemeCode.buttonSecondary),
                  getTooltipItems: (List<LineBarSpot> touchedSpots) {
                    return touchedSpots.map((LineBarSpot touchedSpot) {
                      return LineTooltipItem(
                        "${touchedSpot.y}€",
                        TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: 14,
                          color: theme.getColorFor(ThemeCode.textSecondary)
                        ),
                      );
                    }).toList();
                  },
                ),
                getTouchedSpotIndicator: (
                    _,
                    indicators,
                    ) {
                  return indicators
                      .map((int index) => const TouchedSpotIndicatorData(
                    FlLine(color: Colors.transparent),
                    FlDotData(show: false),
                  ))
                      .toList();
                },
                touchSpotThreshold: 25,
                distanceCalculator:
                    (Offset touchPoint, Offset spotPixelCoordinates) =>
                (touchPoint - spotPixelCoordinates).distance,
              ),
              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.white,
                  barWidth: 4,
                  isStrokeCapRound: true,
                  dotData: const FlDotData(show: false),
                  belowBarData: BarAreaData(show: false),
                  spots: List<FlSpot>.generate(weekDays.length, (int index){
                    return FlSpot(index.toDouble(), ((index+1)%2)/2+0.25);
                  })
                )
              ],
              minX: 0,
              maxX: weekDays.length-1,
              maxY: 1,
              minY: 0,
            ))
          ),
          Row(
            spacing: 16,
            children: [
              Text("Editar hucha", style: TextStyle(color: theme.getColorFor(ThemeCode.textSecondary), fontSize: 14)),
              Icon(Icons.edit_outlined, color: theme.getColorFor(ThemeCode.textSecondary), size: 13)
            ]
          )
        ]
      )
    );
  }
}