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

class DepositScreen extends ConsumerStatefulWidget {
  final Kid kid;

  const DepositScreen({super.key, required this.kid});

  @override
  ConsumerState<DepositScreen> createState() => _DepositScreenState();
}

class _DepositScreenState extends ConsumerState<DepositScreen> {
  String reason = 'other';
  bool program = false;

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

    return WalletManagementLayout(
      kid: widget.kid,
      footer: Container(
        decoration: BoxDecoration(
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
          borderRadius: const BorderRadius.all(Radius.circular(20)),
        ),
        padding: const EdgeInsets.all(10),
        child: Column(
          children: [
            FilledButton(
              onPressed: () {},
              child: Container(
                width: double.infinity,
                padding: const EdgeInsets.all(20),
                child: const Center(child: Text('Añadir dinero')),
              ),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('Cancelar'),
            ),
          ],
        ),
      ),
      children: [
        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: const BorderRadius.all(Radius.circular(20)),
          ),
          padding: const EdgeInsets.all(10),
          child: Column(
            spacing: 10,
            children: [
              const Text(
                'Ingresar dinero en el wallet',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              TextField(
                decoration: const InputDecoration(
                  labelText: 'Cantidad',
                  hintText: '0€',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
              ),
              const Align(
                alignment: Alignment.topLeft,
                child: Text('Saldo total disponible después: 30 €'),
              ),
            ],
          ),
        ),

        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: const BorderRadius.all(Radius.circular(20)),
          ),
          padding: const EdgeInsets.all(10),
          child: Column(
            spacing: 10,
            children: [
              const Text(
                'Motivo',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              const Text('Este dato aparecerá en el reloj del peque'),
              CheckboxListTile(
                title: const Text('Paga semanal'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == 'weekly',
                onChanged: (_) {
                  setState(() {
                    reason = 'weekly';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: const Text('Objetivo semanal cumplido'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == 'goal',
                onChanged: (_) {
                  setState(() {
                    reason = 'goal';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: const Text('Gastos extraordinarios'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == 'extraordinary',
                onChanged: (_) {
                  setState(() {
                    reason = 'extraordinary';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: const Text('Otro'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == 'other',
                onChanged: (_) {
                  setState(() {
                    reason = 'other';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              TextField(
                minLines: 3,
                maxLines: 3,
                maxLength: 150,
                decoration: InputDecoration(
                  labelText:
                      'Escribir mensaje a ${widget.kid.name} del motivo del ingreso',
                  hintText: 'Escribe tu mensaje',
                  border: const OutlineInputBorder(),
                ),
              ),
              const Align(
                alignment: Alignment.topLeft,
                child: Text('Máximo 150 caracteres'),
              ),
            ],
          ),
        ),

        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: const BorderRadius.all(Radius.circular(20)),
          ),
          padding: const EdgeInsets.all(10),
          child: Column(
            spacing: 10,
            children: [
              const Text(
                'Cuándo se envía el dinero',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              const Text('Este dato aparecerá en el reloj del peque'),
              CheckboxListTile(
                title: const Text('Ahora'),
                controlAffinity: ListTileControlAffinity.leading,
                value: !program,
                onChanged: (_) {
                  setState(() {
                    program = false;
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: const Text('Programar'),
                controlAffinity: ListTileControlAffinity.leading,
                value: program,
                onChanged: (_) {
                  setState(() {
                    program = true;
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              if (program)
                const TextField(
                  decoration: InputDecoration(
                    labelText: 'Fecha / hora (placeholder)',
                    border: OutlineInputBorder(),
                  ),
                ),
            ],
          ),
        ),
      ],
    );
  }
}
