import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:sf_app_platform/payments/view/screens/core/wallet_management_layout.dart';

import '../../domain/entities/kid.dart';
import '../../domain/ports/theme_port.dart';

class DepositScreen extends StatefulWidget{
  final Kid kid;

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

  @override
  State<DepositScreen> createState() => DepositScreenState();

}

class DepositScreenState extends State<DepositScreen>{
  String reason = "other";
  bool program = false;

  @override
  Widget build(BuildContext context) {
    ThemePort theme = context.read<ThemePort>();

    return WalletManagementLayout(
      kid: widget.kid,
      children: [
        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.background_primary),
            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.background_primary),
            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.button_primary),
              ),
              CheckboxListTile(
                title: Text('Objetivo semanal cumplido'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason=="goal",
                onChanged: (value) {
                  setState(() {
                    reason="goal";
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.button_primary),
              ),
              CheckboxListTile(
                title: Text('Gastos extraordinarios'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason=="extraordinary",
                onChanged: (value) {
                  setState(() {
                    reason="extraordinary";
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.button_primary),
              ),
              CheckboxListTile(
                title: Text('Otro'),
                controlAffinity: ListTileControlAffinity.leading,
                value: reason=="other",
                onChanged: (value) {
                  setState(() {
                    reason="other";
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.button_primary),
              ),
              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: OutlineInputBorder(),
                  )
              ),
              Align(
                  alignment: Alignment.topLeft,
                  child: Text("Máximo 150 caracteres")
              )
            ],
          ),
        ),
        Container(
          decoration: BoxDecoration(
            color: theme.getColorFor(ThemeCode.background_primary),
            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.button_primary),
              ),
              CheckboxListTile(
                title: Text('Programar'),
                controlAffinity: ListTileControlAffinity.leading,
                value: program==true,
                onChanged: (value) {
                  setState(() {
                    program=true;
                  });
                },
                activeColor: theme.getColorFor(ThemeCode.button_primary),
              ),
              if (program) TextField()
            ],
          ),
        ),
      ],
      footer: Container(
        decoration: BoxDecoration(
          color: theme.getColorFor(ThemeCode.background_primary),
          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"))
        ])
      )
    );
  }

}