import 'package:design_system/design_system.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:home/src/presentation/wallet_management_layout.dart';
import 'package:sf_shared/sf_shared.dart';

class ExtractScreen extends ConsumerWidget {
  final Kid kid;

  @override
  ExtractScreen({super.key, required this.kid});

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

    return WalletManagementLayout(
      kid: kid,
      children: [
        Container(
          padding: EdgeInsets.all(24),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(24)),
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
          ),
          child: Column(
            spacing: 24,
            children: [
              Column(
                spacing: 8,
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "Retirar dinero de la cuenta",
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.w500,
                        letterSpacing: 0,
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "Este dato aparecerá en el reloj del peque",
                      style: TextStyle(fontSize: 14, letterSpacing: 0),
                    ),
                  ),
                ],
              ),
              CustomTextField(
                label: "Selecciona la cantidad de dinero",
                hint: "2€",
                keyboardType: TextInputType.number,
              ),
              Column(
                spacing: 8,
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "Este es el mensaje fijado por defecto:",
                      style: TextStyle(fontSize: 16, letterSpacing: 0),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "\"Hemos quitado el dinero del reloj, ya no puedes pagar con él\"",
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w500,
                        letterSpacing: 0,
                      ),
                    ),
                  ),
                ],
              ),
              Column(
                spacing: 8,
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "Escribir mensaje a ${kid.name} del motivo de la retirada de su dinero",
                      style: TextStyle(fontSize: 14, letterSpacing: 0),
                    ),
                  ),
                  CustomTextField(
                    hint: "Escribe tu mensaje",
                    lines: 4,
                    length: 150,
                  ),
                  Row(
                    spacing: 4,
                    children: [
                      Icon(Icons.info_outline, size: 16),
                      Text(
                        "Máximo 150 caracteres",
                        style: TextStyle(fontSize: 14, letterSpacing: 0),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
      footer: Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(24),
            topLeft: Radius.circular(24),
          ),
        ),
        child: Column(
          spacing: 16,
          children: [
            PrimaryButton(
              onPressed: () => {Navigator.pop(context)},
              text: "Enviar mensaje y bloquear",
              color: theme.getColorFor(ThemeCode.buttonPrimary),
            ),
            TextButton(
              style: ButtonStyle(
                padding: WidgetStatePropertyAll(EdgeInsets.all(0)),
              ),
              onPressed: () => Navigator.pop(context),
              child: Text("Cancelar", style: TextStyle(fontSize: 18)),
            ),
          ],
        ),
      ),
    );
  }
}