import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:notifications/notifications.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 name = "Juan";
    final total = 95.03;
    final available = 44.09;

    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),
              ),
            ),
          ),
        ],
      ),
      Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
          borderRadius: BorderRadius.all(Radius.circular(20)),
        ),
        child: Column(
          spacing: 5,
          children: [
            Row(
              children: [
                Text("Wallet", style: TextStyle(fontWeight: FontWeight.bold)),
                Spacer(),
                Text("$total€"),
              ],
            ),
            Stack(
              children: [
                LinearProgressIndicator(
                  value: available / total,
                  minHeight: 70,
                  borderRadius: BorderRadius.all(Radius.circular(16)),
                ),
                FractionallySizedBox(
                  widthFactor: available / total,
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 20),
                    child: Center(
                      child: Text(
                        "$available€",
                        style: TextStyle(
                          color: theme.getColorFor(ThemeCode.textSecondary),
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Center(child: Text("Disponible")),
          ],
        ),
      ),
      SizedBox(height: 200, child: LineGraph()),
      DepositBlock(max: 150 - total),
      Row(),
      ActivityList(activity: activity, edit: false),
    ];

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
      body: Stack(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(30)),
              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,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
