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

class NewPasswordScreen extends ConsumerStatefulWidget {
  const NewPasswordScreen({super.key});

  @override
  ConsumerState<NewPasswordScreen> createState() => NewPasswordScreenState();
}

class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
  bool passwordVisible = false;
  bool equalPasswords = false;
  String password = "";
  var securityChecks = {
    "min": false,
    "capital": false,
    "number": false,
    "special": false,
  };

  @override
  void initState() {
    passwordVisible = false;
    equalPasswords = false;
    String password = "";
    securityChecks = {
      "min": false,
      "capital": false,
      "number": false,
      "special": false,
    };
    super.initState();
  }

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

    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(30),
        child: Center(
          child: Column(
            spacing: 10,
            children: [
              Spacer(flex: 4),
              Text(
                "Recuperar contraseña",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
              ),
              TextField(
                obscureText: passwordVisible,
                enableSuggestions: false,
                autocorrect: false,
                decoration: InputDecoration(
                  labelText: "Nueva contraseña",
                  hintText: "********",
                  border: OutlineInputBorder(),
                  suffixIcon: IconButton(
                    icon: Icon(
                      passwordVisible ? Icons.visibility : Icons.visibility_off,
                    ),
                    onPressed: () {
                      setState(() {
                        passwordVisible = !passwordVisible;
                      });
                    },
                  ),
                ),
                onChanged: (value) => {
                  setState(() {
                    password = value;
                    securityChecks = checkSecurity(value);
                  }),
                },
              ),
              TextField(
                obscureText: passwordVisible,
                enableSuggestions: false,
                autocorrect: false,
                decoration: InputDecoration(
                  labelText: "Repetir contraseña",
                  hintText: "********",
                  border: OutlineInputBorder(),
                  suffixIcon: IconButton(
                    icon: Icon(
                      passwordVisible ? Icons.visibility : Icons.visibility_off,
                    ),
                    onPressed: () {
                      setState(() {
                        passwordVisible = !passwordVisible;
                      });
                    },
                  ),
                ),
                onChanged: (value) => {
                  setState(() {
                    equalPasswords = password == value;
                  }),
                },
              ),
              Row(
                children: [
                  securityChecks["min"]!
                      ? Icon(
                          Icons.check,
                          color: theme.getColorFor(ThemeCode.buttonPrimary),
                        )
                      : Icon(
                          Icons.cancel_outlined,
                          color: theme.getColorFor(ThemeCode.buttonSecondary),
                        ),
                  Text("Al menos 8 caracteres"),
                ],
              ),
              Row(
                children: [
                  securityChecks["capital"]!
                      ? Icon(
                          Icons.check,
                          color: theme.getColorFor(ThemeCode.buttonPrimary),
                        )
                      : Icon(
                          Icons.cancel_outlined,
                          color: theme.getColorFor(ThemeCode.buttonSecondary),
                        ),
                  Text("Una mayúscula"),
                ],
              ),
              Row(
                children: [
                  securityChecks["number"]!
                      ? Icon(
                          Icons.check,
                          color: theme.getColorFor(ThemeCode.buttonPrimary),
                        )
                      : Icon(
                          Icons.cancel_outlined,
                          color: theme.getColorFor(ThemeCode.buttonSecondary),
                        ),
                  Text("Un número"),
                ],
              ),
              Row(
                children: [
                  securityChecks["special"]!
                      ? Icon(
                          Icons.check,
                          color: theme.getColorFor(ThemeCode.buttonPrimary),
                        )
                      : Icon(
                          Icons.cancel_outlined,
                          color: theme.getColorFor(ThemeCode.buttonSecondary),
                        ),
                  Text("Un carácter especial"),
                ],
              ),
              Spacer(flex: 1),
              FilledButton(
                onPressed: () => {},
                child: Container(
                  width: double.infinity,
                  padding: EdgeInsets.all(20),
                  child: Text("Aceptar"),
                ),
              ),
              Spacer(flex: 4),
            ],
          ),
        ),
      ),
    );
  }

  //TODO: Extraer de la vista
  Map<String, bool> checkSecurity(String value) {
    Map<String, bool> checks = {};

    checks["min"] = value.length >= 8;
    checks["capital"] = RegExp(r'[A-Z]').hasMatch(value);
    checks["number"] = RegExp(r'[0-9]').hasMatch(value);
    checks["special"] = RegExp(r'[^A-Za-z0-9]').hasMatch(value);

    return checks;
  }
}
