import 'package:design_system/design_system.dart';
import 'package:flutter/material.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: [
            PrimaryButton(
              onPressed: ()=>{},
              text: "Añadir dinero",
              color: theme.getColorFor(ThemeCode.buttonPrimary)
            ),
            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),
              ),
              CustomTextField(
                numeric: true,
                label: "Cantidad",
                hint: "0€",
              ),
              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(
                contentPadding: EdgeInsets.zero,
                title: const Text('Paga semanal'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == 'weekly',
                onChanged: (_) {
                  setState(() {
                    reason = 'weekly';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                contentPadding: EdgeInsets.zero,
                title: const Text('Objetivo semanal cumplido'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == 'goal',
                onChanged: (_) {
                  setState(() {
                    reason = 'goal';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                contentPadding: EdgeInsets.zero,
                title: const Text('Gastos extraordinarios'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == 'extraordinary',
                onChanged: (_) {
                  setState(() {
                    reason = 'extraordinary';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                contentPadding: EdgeInsets.zero,
                title: const Text('Otro'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == 'other',
                onChanged: (_) {
                  setState(() {
                    reason = 'other';
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CustomTextField(
                lines: 3,
                length: 150,
                label: "Escribir mensaje a ${widget.kid.name} del motivo del ingreso",
                hint: "Escribe tu mensaje",
              ),
              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(
                contentPadding: EdgeInsets.zero,
                title: const Text('Ahora'),
                controlAffinity: ListTileControlAffinity.leading,
                value: !program,
                onChanged: (_) {
                  setState(() {
                    program = false;
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                contentPadding: EdgeInsets.zero,
                title: const Text('Programar'),
                controlAffinity: ListTileControlAffinity.leading,
                value: program,
                onChanged: (_) {
                  setState(() {
                    program = true;
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              if (program) CustomTextField(),
            ],
          ),
        ),
      ],
    );
  }
}