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 ConsumerWidget {
  final Kid kid;

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

  String reason = "other";
  bool program = false;

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

    return WalletManagementLayout(
      kid: kid,
      footer: Container(
        decoration: BoxDecoration(
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
          borderRadius: BorderRadius.all(Radius.circular(20)),
        ),
        padding: EdgeInsets.all(10),
        child: Column(
          children: [
            FilledButton(
              onPressed: () => {},
              child: Container(
                width: double.infinity,
                padding: EdgeInsets.all(20),
                child: Center(child: Text("Añadir dinero")),
              ),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Cancelar"),
            ),
          ],
        ),
      ),
      children: [
        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: BorderRadius.all(Radius.circular(20)),
          ),
          padding: EdgeInsets.all(10),
          child: Column(
            spacing: 10,
            children: [
              Text(
                "Ingresar dinero en el wallet",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              TextField(
                decoration: InputDecoration(
                  labelText: "Cantidad",
                  hintText: "0€",
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
              ),
              Align(
                alignment: Alignment.topLeft,
                child: Text("Saldo total disponible después: 30 €"),
              ),
            ],
          ),
        ),
        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: BorderRadius.all(Radius.circular(20)),
          ),
          padding: EdgeInsets.all(10),
          child: Column(
            spacing: 10,
            children: [
              Text(
                "Motivo",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              Text("Este dato aparecerá en el reloj del peque"),
              CheckboxListTile(
                title: Text('Paga semanal'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == "weekly",
                onChanged: (value) {
                  // setState(() {
                  //   reason = "weekly";
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: Text('Objetivo semanal cumplido'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == "goal",
                onChanged: (value) {
                  // setState(() {
                  //   reason = "goal";
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: Text('Gastos extraordinarios'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == "extraordinary",
                onChanged: (value) {
                  // setState(() {
                  //   reason = "extraordinary";
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: Text('Otro'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason == "other",
                onChanged: (value) {
                  // setState(() {
                  //   reason = "other";
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              TextField(
                minLines: 3,
                maxLines: 3,
                maxLength: 150,
                decoration: InputDecoration(
                  labelText:
                      "Escribir mensaje a ${kid.name} del motivo del ingreso",
                  hintText: "Escribe tu mensaje",
                  border: OutlineInputBorder(),
                ),
              ),
              Align(
                alignment: Alignment.topLeft,
                child: Text("Máximo 150 caracteres"),
              ),
            ],
          ),
        ),
        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            borderRadius: BorderRadius.all(Radius.circular(20)),
          ),
          padding: EdgeInsets.all(10),
          child: Column(
            spacing: 10,
            children: [
              Text(
                "Cuándo se envía el dinero",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              Text("Este dato aparecerá en el reloj del peque"),
              CheckboxListTile(
                title: Text('Ahora'),
                controlAffinity: ListTileControlAffinity.leading,
                value: program == false,
                onChanged: (value) {
                  // setState(() {
                  //   program = false;
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: Text('Programar'),
                controlAffinity: ListTileControlAffinity.leading,
                value: program == true,
                onChanged: (value) {
                  // setState(() {
                  //   program = true;
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              if (program) TextField(),
            ],
          ),
        ),
      ],
    );
  }
}