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

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

  String frequence = "weekly";
  var conditions = {
    "weeklyLimits": false,
    "incidences": false,
    "holidays": false,
  };

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

    return WalletManagementLayout(
      kid: kid,
      footer: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
        ),
        child: Column(
          spacing: 10,
          children: [
            FilledButton(
              onPressed: () => {},
              child: Container(
                width: double.infinity,
                padding: EdgeInsets.all(20),
                child: Center(child: Text("Activar paga automática")),
              ),
            ),
            TextButton(onPressed: () => {}, 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(
                "Paga automática",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              TextField(
                decoration: InputDecoration(
                  labelText: "Cantidad",
                  hintText: "0€",
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
              ),
              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(
                "Frecuencia",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              Text("Cuándo se envía el dinero"),
              CheckboxListTile(
                title: Text('Semanal'),
                controlAffinity: ListTileControlAffinity.leading,
                value: frequence == "weekly",
                onChanged: (value) {
                  // setState(() {
                  //   frequence = "weekly";
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: Text('Cada dos semanas'),
                controlAffinity: ListTileControlAffinity.leading,
                value: frequence == "biweekly",
                onChanged: (value) {
                  // setState(() {
                  //   frequence = "biweekly";
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: Text('Mensual'),
                controlAffinity: ListTileControlAffinity.leading,
                value: frequence == "monthly",
                onChanged: (value) {
                  // setState(() {
                  //   frequence = "monthly";
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              Container(
                width: double.infinity,
                child: DropdownMenu(
                  label: Text("Día de la semana"),
                  initialSelection: "Domingo",
                  dropdownMenuEntries: List<DropdownMenuEntry>.generate(7, (
                    int index,
                  ) {
                    final days = [
                      "Lunes",
                      "Martes",
                      "Miércoles",
                      "Jueves",
                      "Viernes",
                      "Sábado",
                      "Domingo",
                    ];
                    return DropdownMenuEntry(
                      value: days[index],
                      label: days[index],
                    );
                  }),
                ),
              ),
              DropdownMenu(
                label: Text("Hora del día"),
                initialSelection: 9,
                dropdownMenuEntries: List<DropdownMenuEntry>.generate(24, (
                  int index,
                ) {
                  return DropdownMenuEntry(value: index, label: "$index:00");
                }),
              ),
              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(
                "Condiciones",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              Text("Este dato aparecerá en el reloj del peque"),
              CheckboxListTile(
                title: Text('Sólo si cumple límites semanales'),
                controlAffinity: ListTileControlAffinity.leading,
                value: conditions["weeklyLimits"],
                onChanged: (value) {
                  // setState(() {
                  //   conditions["weeklyLimits"] = !conditions["weeklyLimits"]!;
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: Text('Sólo si no ha tenido incidencias'),
                controlAffinity: ListTileControlAffinity.leading,
                value: conditions["incidences"],
                onChanged: (value) {
                  // setState(() {
                  //   conditions["incidences"] = !conditions["incidences"]!;
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
              CheckboxListTile(
                title: Text('Pausar durante vacaciones'),
                controlAffinity: ListTileControlAffinity.leading,
                value: conditions["holidays"],
                onChanged: (value) {
                  // setState(() {
                  //   conditions["holidays"] = !conditions["holidays"]!;
                  // });
                },
                activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
              ),
            ],
          ),
        ),
      ],
    );
  }
}