import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';

class CreateProfileScreen extends ConsumerWidget {
  const CreateProfileScreen({super.key});

  final int currentStep = 0;

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

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
      body: Container(
        margin: EdgeInsets.all(30),
        child: Center(
          child: Column(
            spacing: 10,
            children: [
              Stepper(
                type: StepperType.horizontal,
                currentStep: currentStep,
                onStepCancel: () => currentStep == 0,
                // ? null
                // :
                // setState(() {
                //     currentStep -= 1;
                //   }),
                controlsBuilder:
                    (BuildContext context, ControlsDetails controls) {
                      return FilledButton(
                        style: ButtonStyle(
                          backgroundColor: WidgetStatePropertyAll<Color>(
                            theme.getColorFor(ThemeCode.buttonPrimary),
                          ),
                        ),
                        onPressed: controls.onStepContinue,
                        child: const Text('Continuar'),
                      );
                    },
                steps: [
                  Step(
                    state: currentStep > 0
                        ? StepState.complete
                        : StepState.indexed,
                    isActive: currentStep >= 0,
                    stepStyle: currentStep >= 0
                        ? StepStyle(
                            connectorThickness: 0,
                            color: Color(0xFF329e95),
                            indexStyle: TextStyle(color: Colors.transparent),
                          )
                        : StepStyle(
                            connectorThickness: 0,
                            color: Colors.transparent,
                            boxShadow: BoxShadow(spreadRadius: 5),
                            indexStyle: TextStyle(color: Colors.transparent),
                          ),
                    title: Text(""),
                    content: Column(
                      spacing: 10,
                      children: [
                        Text(
                          "Crea su perfil",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 30,
                          ),
                        ),
                        Text(
                          "Necesitamos estos datos para crear su cuenta y gestionar sus pagas y gastos",
                        ),
                        Text(
                          "Comienza con un peque; luego podrás agregar más",
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        TextField(
                          decoration: InputDecoration(
                            labelText: "Nombre",
                            hintText: "Nombre",
                            border: OutlineInputBorder(),
                          ),
                        ),
                        TextField(
                          decoration: InputDecoration(
                            labelText: "Apellidos",
                            hintText: "Apellidos",
                            border: OutlineInputBorder(),
                          ),
                        ),
                        Row(
                          spacing: 10,
                          children: [
                            Expanded(
                              child: TextField(
                                decoration: InputDecoration(
                                  label: Text("Fecha de nacimiento"),
                                  hintText: "DD",
                                  border: OutlineInputBorder(),
                                ),
                                keyboardType: TextInputType.number,
                                inputFormatters: [
                                  FilteringTextInputFormatter.digitsOnly,
                                ],
                              ),
                            ),
                            Expanded(
                              child: TextField(
                                decoration: InputDecoration(
                                  hintText: "MM",
                                  border: OutlineInputBorder(),
                                ),
                                keyboardType: TextInputType.number,
                                inputFormatters: [
                                  FilteringTextInputFormatter.digitsOnly,
                                ],
                              ),
                            ),
                            Expanded(
                              child: TextField(
                                decoration: InputDecoration(
                                  hintText: "AAAA",
                                  border: OutlineInputBorder(),
                                ),
                                keyboardType: TextInputType.number,
                                inputFormatters: [
                                  FilteringTextInputFormatter.digitsOnly,
                                ],
                              ),
                            ),
                          ],
                        ),
                        TextField(
                          decoration: InputDecoration(
                            labelText: "Dirección completa",
                            hintText: "Nombre de la calle",
                            border: OutlineInputBorder(),
                          ),
                        ),
                        TextButton(
                          onPressed: () => {},
                          child: Text(
                            "Cambiar dirección",
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Step(
                    state: currentStep > 1
                        ? StepState.complete
                        : StepState.indexed,
                    isActive: currentStep >= 1,
                    stepStyle: currentStep >= 1
                        ? StepStyle(
                            connectorThickness: 0,
                            color: Color(0xFF329e95),
                            indexStyle: TextStyle(color: Colors.transparent),
                          )
                        : StepStyle(
                            connectorThickness: 0,
                            color: Colors.transparent,
                            boxShadow: BoxShadow(spreadRadius: 5),
                            indexStyle: TextStyle(color: Colors.transparent),
                          ),
                    title: Text(""),
                    content: Column(
                      spacing: 10,
                      children: [
                        Text(
                          "Vincula su correa y su reloj",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 30,
                          ),
                        ),
                        SvgPicture.asset("assets/images/ui/formulario.svg"),
                        Row(
                          spacing: 10,
                          children: [
                            Text("1"),
                            Column(
                              children: [
                                Text("Escanea la correa"),
                                Text("El peque podrá realizar pagos"),
                              ],
                            ),
                          ],
                        ),
                        Row(
                          spacing: 10,
                          children: [
                            Text("2"),
                            Column(
                              children: [
                                Text("Escanea el reloj"),
                                Text("Visualizarás los gastos que se hagan"),
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Step(
                    state: currentStep > 2
                        ? StepState.complete
                        : StepState.indexed,
                    isActive: currentStep >= 2,
                    stepStyle: currentStep >= 2
                        ? StepStyle(
                            connectorThickness: 0,
                            color: Color(0xFF329e95),
                            indexStyle: TextStyle(color: Colors.transparent),
                          )
                        : StepStyle(
                            connectorThickness: 0,
                            color: Colors.transparent,
                            boxShadow: BoxShadow(spreadRadius: 5),
                            indexStyle: TextStyle(color: Colors.transparent),
                          ),
                    title: Text(""),
                    content: Column(
                      spacing: 10,
                      children: [
                        Text(
                          "¡Dale su primera paga!",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 30,
                          ),
                        ),
                        Text(
                          "Enséñales a gestionar su dinero recargando su reloj",
                        ),
                        TextField(
                          decoration: InputDecoration(
                            labelText: "Cantidad de dinero de la paga",
                            hintText: "0€",
                            border: OutlineInputBorder(),
                          ),
                          keyboardType: TextInputType.number,
                          inputFormatters: [
                            FilteringTextInputFormatter.digitsOnly,
                          ],
                        ),
                        Text("Cantidad mínima: 10€"),
                        Text(
                          "Por seguridad sólo se puede disponer de un máximo de 150€ por wallet",
                        ),
                        Text("Método de ingreso"),
                        Row(
                          spacing: 20,
                          children: [
                            OutlinedButton(
                              onPressed: () => {},
                              child: SvgPicture.asset(
                                "assets/images/ui/visa.svg",
                              ),
                            ),
                            OutlinedButton(
                              onPressed: () => {},
                              child: SvgPicture.asset(
                                "assets/images/ui/paypal.svg",
                              ),
                            ),
                            OutlinedButton(
                              onPressed: () => {},
                              child: Row(
                                children: [
                                  SvgPicture.asset(
                                    "assets/images/ui/banco.svg",
                                  ),
                                  Text("Transferencia"),
                                ],
                              ),
                            ),
                          ],
                        ),
                        Row(
                          children: [
                            Icon(Icons.lock_outline),
                            Text(
                              "EL pago en esta app es seguro y cumple la normativa europea. Sólo se usará el dinero que decidas para las huchas de tus hijos.",
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
