import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:notifications/notifications.dart';
import 'package:profile/src/core/kid_line_chart.dart';
import 'package:profile/src/settings_screen.dart';
import 'package:sf_shared/sf_shared.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class ProfileScreen extends ConsumerWidget {
  const ProfileScreen({super.key});

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

    final activity = [
      {"type": "goal"},
      {"type": "wage", "amount": 5},
      {"type": "lock"},
      {"type": "lock"},
    ];

    final kids = [
      Kid(name: "Ana", balance: 15, savings: 5),
      Kid(name: "Carlos", balance: 15, savings: 5)
    ];

    final name = "Juan";
    final total = 95.03;
    final available = 44.09;
    final savings = 4.16;
    final savingsPlan = 30.0;

    final content = [
      Row(
        children: [
          Text(
            name,
            style: TextStyle(
              color: theme.getColorFor(ThemeCode.textSecondary),
              fontWeight: FontWeight.bold,
              fontSize: 30,
            ),
          ),
          Spacer(),
          TextButton(
            onPressed: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => SettingsScreen()),
            ),
            child: Text(
              "Ajustes de la cuenta",
              style: TextStyle(
                color: theme.getColorFor(ThemeCode.textSecondary),
              ),
            ),
          ),
        ],
      ),
      WalletBalanceBlock(max: total, value: available, savings: savings, savingsPlan: savingsPlan),
      LineGraph(),
      DepositBlock(max: 150 - total),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
        ),
        child: TextButton(
          onPressed: ()=>{},
          child: Row(
            spacing: 10,
            children: [
              Icon(Icons.output_outlined,
                size: 24,
                color: theme.getColorFor(ThemeCode.textPrimary)
              ),
              Text(
                "Retirar dinero del wallet",
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w500,
                  color: theme.getColorFor(ThemeCode.textPrimary)
                )
              )
            ],
          )
        )
      ),
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          spacing: 16,
          children: List<Widget>.generate(kids.length, (int index){
            return KidLineChart(kid: kids[index], index: index);
          })
        ),
      ),
      ActivityList(activity: activity, edit: false),
    ];

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
      body: Stack(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.only(bottomRight: Radius.circular(24), bottomLeft: Radius.circular(24)),
              color: Color(0xFF4B4B4B),
            ),
            child: SizedBox(width: double.infinity, height: 200),
          ),
          Column(
            children: [
              Expanded(
                child: Container(
                  margin: EdgeInsets.fromLTRB(20, 20, 20, 0),
                  child: ListView.separated(
                    itemBuilder: (BuildContext context, int index) {
                      return content[index];
                    },
                    separatorBuilder: (BuildContext context, int index) {
                      return Divider(color: Colors.transparent, height: 20);
                    },
                    itemCount: content.length,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}