import 'package:design_system/design_system.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 LockCardScreen extends ConsumerWidget{
  final Kid kid;

  @override
  LockCardScreen({
    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(
                    "Bloqueo de tarjeta",
                    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)
                ))
              ],
            ),
            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(
                  "\"De momento hemos bloqueado el dinero del reloj\"",
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0)
                ))
              ],
            ),
            Column(
              spacing: 8,
              children: [
                Text(
                  "Escribir mensaje a ${kid.name} del motivo del bloqueo",
                  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))
            )
          ],
        ),
      )
    );
  }
}