import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';
import 'package:sf_app_platform/payments/view/screens/core/money_text.dart';
import 'package:sf_app_platform/payments/view/screens/deposit_screen.dart';
import 'package:sf_app_platform/payments/view/screens/limits_screen.dart';
import 'package:sf_app_platform/payments/view/screens/wage_screen.dart';

import '../../domain/entities/kid.dart';
import '../../domain/ports/theme_port.dart';

class KidWalletScreen extends StatefulWidget{
  final Kid kid;

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

  @override
  State<KidWalletScreen> createState() => _KidWalletScreenState();
}

class _KidWalletScreenState extends State<KidWalletScreen> {

  @override
  Widget build(BuildContext context) {

    final theme = context.read<ThemePort>();

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.background_secondary),
      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.background_primary),)
                    ),
                    SizedBox(height: 50, child: SvgPicture.asset("assets/images/ui/face.svg")),
                    Text(widget.kid.name,
                      style: TextStyle(
                        color: theme.getColorFor(ThemeCode.background_primary),
                        fontWeight: FontWeight.bold,
                        fontSize: 20
                      )
                    ),
                    Spacer(),
                    SizedBox(height: 30, child: SvgPicture.asset("assets/images/ui/face.svg")),
                  ],
                ),
                MoneyText(
                  text: "${widget.kid.balance.toString()}€",
                  size: 60,
                  resize: true,
                  color: theme.getColorFor(ThemeCode.text_secondary)
                ),
                Text("Saldo disponible", style: TextStyle(color: theme.getColorFor(ThemeCode.background_primary))),
                LinearProgressIndicator(
                  value: 0.7,
                  color: theme.getColorFor(ThemeCode.background_primary),
                  backgroundColor: theme.getColorFor(ThemeCode.background_primary).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.background_primary),
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ),
                  child: Expanded(child: Center( child: Row(
                    spacing: 10,
                    children: [
                      TextButton(onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>DepositScreen(kid: widget.kid))),
                        child: Column(
                          spacing: 10,
                          children: [
                            Icon(Icons.add_circle_outline, color: theme.getColorFor(ThemeCode.text_primary)),
                            Text("Añadir", style: TextStyle(color: theme.getColorFor(ThemeCode.text_primary)))
                          ]
                        )
                      ),
                      Spacer(),
                      TextButton(onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>WageScreen(kid: widget.kid))),
                        child: Column(
                          spacing: 10,
                          children: [
                            Icon(Icons.account_balance_wallet_outlined, color: theme.getColorFor(ThemeCode.text_primary)),
                            Text("Paga", style: TextStyle(color: theme.getColorFor(ThemeCode.text_primary)))
                          ]
                        )
                      ),
                      Spacer(),
                      TextButton(onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>LimitsScreen(kid: widget.kid))),
                        child: Column(
                          spacing: 10,
                          children: [
                            Icon(Icons.list_alt_outlined, color: theme.getColorFor(ThemeCode.text_primary)),
                            Text("Límites", style: TextStyle(color: theme.getColorFor(ThemeCode.text_primary)))
                          ]
                        )
                      ),
                      Spacer(),
                      TextButton(onPressed: ()=>{},
                        child: Column(
                          spacing: 10,
                          children: [
                          Icon(Icons.emoji_events_outlined, color: theme.getColorFor(ThemeCode.text_primary)),
                            Text("Metas", style: TextStyle(color: theme.getColorFor(ThemeCode.text_primary)))
                          ]
                        )
                      )
                    ],
                  )
                ))),
                Container(
                  padding: EdgeInsets.all(15),
                  height: 400,
                  decoration: BoxDecoration(
                    color: theme.getColorFor(ThemeCode.background_primary),
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ), child: Column(
                    children: [
                      Text("Últimos movimientos"),
                      activityList(context),
                      TextButton(onPressed: ()=>{}, child: Text("Ver todos"))
                    ],
                  )
                )
              ],
            )
          )
        ],
      ),
    );
  }

  Widget activityList(BuildContext context){
    final theme = context.read<ThemePort>();

    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.background_tertiary),
                      borderRadius: BorderRadius.all(Radius.circular(16))
                    ),
                    child: Icon(Icons.local_pizza_outlined, color: theme.getColorFor(ThemeCode.button_primary)),
                  ),
                  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.text_primary)
                  )
                ],
              );
            }))
          ],
        );
      })
    ));
  }
}