import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';
import 'package:sf_app_platform/payments/view/screens/core/deposit_block.dart';
import 'package:sf_app_platform/payments/view/screens/core/money_text.dart';
import 'package:sf_app_platform/payments/view/screens/link_watch/create_profile_screen.dart';

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


class HomeScreen extends StatelessWidget{
  final String name = "Juan";
  final double total = 95.03;
  final List<Kid> kids = [
    Kid(name:"Carlos", balance:25.47),
    Kid(name:"Ana", balance:25.47),
  ];
  late final double available = double.parse(kids.fold(total, (t, e) => t - e.balance).toStringAsFixed(2));

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    ThemePort theme = context.read<ThemePort>();

    return SingleChildScrollView( child: Container(
      color: theme.getColorFor(ThemeCode.background_secondary),
      margin: EdgeInsets.all(30),
      child: Column(
        children: [
          Align(
            alignment: Alignment.topLeft,
            child: Text.rich(
              TextSpan(
                text: "Hola, ",
                style: TextStyle(fontSize: 25),
                children: <TextSpan>[
                  TextSpan(text: name, style: TextStyle(fontWeight: FontWeight.bold)),
                ],
              ),
            )
          ),
          walletsList(context, kids),
          Align(
            alignment: Alignment.topLeft,
            child: TextButton(
              onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>CreateProfileScreen())),
              child: Text("+ Añadir otro peque", style: TextStyle(
                fontWeight: FontWeight.bold,
                color: theme.getColorFor(ThemeCode.text_primary)
              ))
            )
          ),
          Container(
            padding: EdgeInsets.all(20),
            decoration: BoxDecoration(color: theme.getColorFor(ThemeCode.background_primary), borderRadius: BorderRadius.all(Radius.circular(20))),
            child: Column(
              spacing: 5,
              children: [
                Row(
                  children: [
                    Text("Wallet", style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20
                    )),
                    Spacer(),
                    MoneyText(
                      text: "$total€ total",
                      size: 25,
                      resize: true,
                      color: theme.getColorFor(ThemeCode.text_primary)
                    )
                  ]
                ),
                Stack(
                  children: [
                    LinearProgressIndicator(
                      value: available/total,
                      minHeight: 70,
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      color: theme.getColorFor(ThemeCode.button_primary),
                      backgroundColor: theme.getColorFor(ThemeCode.background_tertiary),
                    ),
                    FractionallySizedBox(
                      widthFactor: available/total,
                      child: Container(
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Center(
                          child: MoneyText(
                            text: "$available€",
                            size: 35,
                            resize: true,
                            color: theme.getColorFor(ThemeCode.text_secondary)
                          ),
                        )
                      )
                    ),
                  ],
                ),
                Center(child: Text("Disponible"))
              ],
            ),
          ),
          DepositBlock(max: 150-total)
        ]
      ),
    ));
  }

  Widget walletsList(BuildContext context, List<Kid> kids) {
    final theme = context.read<ThemePort>();

    return Column(
      spacing: 20,
      children: List<Widget>.generate(kids.length, (int index) {
        return
          GestureDetector(
            onTap: ()=>{Navigator.push(context, MaterialPageRoute(builder: (_)=>KidWalletScreen(kid: kids[index])))},
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(16.0)),
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: theme.getCardColorFor(index)
                  )
                ),
                child: Column(
                  children: [
                    Align(
                      alignment: Alignment.topLeft,
                      child: Text(kids[index].name,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 25,
                          color: theme.getColorFor(ThemeCode.text_secondary)
                        )
                      )
                    ),
                    Row(
                      spacing: 10,
                      children: [
                        SizedBox(
                          height: 60,
                          width: 60,
                          child: SvgPicture.asset("assets/images/ui/face.svg"),
                        ),
                        Spacer(),
                        Column(children: [
                          MoneyText(
                              text: "${kids[index].balance}€",
                              size: 50,
                              resize: true,
                              color: theme.getColorFor(ThemeCode.text_secondary)
                          ),
                          Text("en su hucha", style: TextStyle(color: theme.getColorFor(ThemeCode.text_secondary)))
                        ])

                      ]
                    ),
                    Row(
                      children: [
                        TextButton(
                          onPressed: ()=>showDialog(
                            context: context,
                            builder: (BuildContext context) => Dialog(
                              child: Container(height: 100, width: double.infinity, child: Column(
                                children: [
                                  FilledButton(onPressed: ()=>{}, child: Text("Cámara")),
                                  OutlinedButton(onPressed: ()=>{}, child: Text("Galería de fotos"))
                                ],
                              )),
                            )
                          ),
                          child: Row(
                            spacing: 10,
                            children: [
                              Icon(Icons.edit, color: theme.getColorFor(ThemeCode.text_secondary)),
                              Text("Editar", style: TextStyle(color: theme.getColorFor(ThemeCode.text_secondary)))
                            ]
                          )
                        ),
                        Spacer(),
                        FilledButton(
                          onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>DepositScreen(kid: kids[index]))),
                          style: ButtonStyle(
                            backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.button_secondary)),
                          ),
                          child: Container(
                            padding: EdgeInsets.symmetric(horizontal: 0,vertical: 10),
                            child: Text("+ Añadir dinero")
                          )
                        )
                      ],
                    )
                  ]
                ),
              )
            )
          );
      })
    );
  }
}