import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:home/src/presentation/deposit_screen.dart';
import 'package:sf_shared/sf_shared.dart';
import 'package:home/src/presentation/limits_screen.dart';
import 'package:home/src/presentation/money_text.dart';
import 'package:home/src/presentation/wage_screen.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class KidWalletScreen extends ConsumerWidget {
  final Kid kid;

  const KidWalletScreen({super.key, required this.kid});

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

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
      body: Stack(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(30)),
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: theme.getCardColorFor(0),
              ),
            ),
            child: SizedBox(width: double.infinity, height: 300),
          ),
          Container(
            margin: EdgeInsets.symmetric(vertical: 50, horizontal: 20),
            child: Column(
              spacing: 15,
              children: [
                Row(
                  spacing: 7,
                  children: [
                    IconButton(
                      onPressed: () => Navigator.pop(context),
                      icon: Icon(
                        Icons.arrow_back_ios_new_outlined,
                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
                      ),
                    ),
                    SizedBox(
                      height: 50,
                      child: SvgPicture.asset("assets/images/ui/face.svg"),
                    ),
                    Text(
                      kid.name,
                      style: TextStyle(
                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
                        fontWeight: FontWeight.bold,
                        fontSize: 20,
                      ),
                    ),
                    Spacer(),
                    SizedBox(
                      height: 30,
                      child: SvgPicture.asset("assets/images/ui/face.svg"),
                    ),
                  ],
                ),
                MoneyText(
                  text: "${kid.balance.toString()}€",
                  size: 60,
                  resize: true,
                  color: theme.getColorFor(ThemeCode.textSecondary),
                ),
                Text(
                  "Saldo disponible",
                  style: TextStyle(
                    color: theme.getColorFor(ThemeCode.backgroundPrimary),
                  ),
                ),
                LinearProgressIndicator(
                  value: 0.7,
                  color: theme.getColorFor(ThemeCode.backgroundPrimary),
                  backgroundColor: theme
                      .getColorFor(ThemeCode.backgroundPrimary)
                      .withAlpha(0x4C),
                  minHeight: 10,
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.only(top: 30),
                  decoration: BoxDecoration(
                    color: theme.getColorFor(ThemeCode.backgroundPrimary),
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ),
                  child: Expanded(
                    child: Center(
                      child: Row(
                        spacing: 10,
                        children: [
                          TextButton(
                            onPressed: () => Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (_) => DepositScreen(kid: kid),
                              ),
                            ),
                            child: Column(
                              spacing: 10,
                              children: [
                                Icon(
                                  Icons.add_circle_outline,
                                  color: theme.getColorFor(
                                    ThemeCode.textPrimary,
                                  ),
                                ),
                                Text(
                                  "Añadir",
                                  style: TextStyle(
                                    color: theme.getColorFor(
                                      ThemeCode.textPrimary,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Spacer(),
                          TextButton(
                            onPressed: () => Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (_) => WageScreen(kid: kid),
                              ),
                            ),
                            child: Column(
                              spacing: 10,
                              children: [
                                Icon(
                                  Icons.account_balance_wallet_outlined,
                                  color: theme.getColorFor(
                                    ThemeCode.textPrimary,
                                  ),
                                ),
                                Text(
                                  "Paga",
                                  style: TextStyle(
                                    color: theme.getColorFor(
                                      ThemeCode.textPrimary,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Spacer(),
                          TextButton(
                            onPressed: () => Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (_) => LimitsScreen(kid: kid),
                              ),
                            ),
                            child: Column(
                              spacing: 10,
                              children: [
                                Icon(
                                  Icons.list_alt_outlined,
                                  color: theme.getColorFor(
                                    ThemeCode.textPrimary,
                                  ),
                                ),
                                Text(
                                  "Límites",
                                  style: TextStyle(
                                    color: theme.getColorFor(
                                      ThemeCode.textPrimary,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Spacer(),
                          TextButton(
                            onPressed: () => {},
                            child: Column(
                              spacing: 10,
                              children: [
                                Icon(
                                  Icons.emoji_events_outlined,
                                  color: theme.getColorFor(
                                    ThemeCode.textPrimary,
                                  ),
                                ),
                                Text(
                                  "Metas",
                                  style: TextStyle(
                                    color: theme.getColorFor(
                                      ThemeCode.textPrimary,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(15),
                  height: 400,
                  decoration: BoxDecoration(
                    color: theme.getColorFor(ThemeCode.backgroundPrimary),
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ),
                  child: Column(
                    children: [
                      Text("Últimos movimientos"),
                      activityList(context, theme),
                      TextButton(onPressed: () => {}, child: Text("Ver todos")),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget activityList(BuildContext context, theme) {
    final activity = [
      {
        "date": "10/05",
        "payments": [1, 2, 3],
      },
      {
        "date": "10/04",
        "payments": [1, 2],
      },
      {
        "date": "10/02",
        "payments": [1, 2, 3, 4],
      },
    ];

    return Expanded(
      child: ListView(
        children: List<Widget>.generate(activity.length, (int index) {
          return Column(
            spacing: 20,
            children: [
              Text(activity[index]["date"].toString()),
              Column(
                spacing: 15,
                children: List<Widget>.generate(
                  (activity[index]["payments"] as List<Object>).length,
                  (int i) {
                    //var a = (activity[index]["payments"] as List<Object>)[i];
                    return Row(
                      spacing: 7,
                      children: [
                        Container(
                          padding: EdgeInsets.all(9),
                          decoration: BoxDecoration(
                            color: theme.getColorFor(
                              ThemeCode.backgroundTertiary,
                            ),
                            borderRadius: BorderRadius.all(Radius.circular(16)),
                          ),
                          child: Icon(
                            Icons.local_pizza_outlined,
                            color: theme.getColorFor(ThemeCode.buttonPrimary),
                          ),
                        ),
                        Column(
                          children: [
                            Text(
                              "Vips",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                            Text("20:15"),
                          ],
                        ),
                        Spacer(),
                        MoneyText(
                          text: "5.1€",
                          size: 20,
                          resize: true,
                          color: theme.getColorFor(ThemeCode.textPrimary),
                        ),
                      ],
                    );
                  },
                ),
              ),
            ],
          );
        }),
      ),
    );
  }
}
