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

class PhoneCodeScreen extends ConsumerWidget {
  // final String phone;
  final NavigationContract navigationContract;

  PhoneCodeScreen({super.key, required this.navigationContract});

  // class PhoneCodeScreenState extends State<PhoneCodeScreen> {
  final focusNodes = List<FocusNode>.generate(6, (int i) {
    return FocusNode();
  });

  @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: Expanded(
          child: Center(
            child: Column(
              spacing: 48,
              children: [
                Spacer(flex: 8),
                Column(
                  spacing: 24,
                  children: [
                    Text(
                      "Conéctate",
                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                    ),
                    Text.rich(
                      TextSpan(
                        text: "Hemos enviado el código al ",
                        children: [
                          TextSpan(
                            // text: widget.phone,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                        ],
                      ),
                    ),
                    Text("Introduce el código aquí"),
                    Row(
                      spacing: 8,
                      children: List<Widget>.generate(6, (int i) {
                        return Expanded(
                          child: TextField(
                            focusNode: focusNodes[i],
                            keyboardType: TextInputType.number,
                            inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                            textAlign: TextAlign.center,
                            decoration: InputDecoration(
                              hintText: "0",
                              counterText: "",
                              border: OutlineInputBorder(),
                            ),
                            maxLength: 1,
                            onChanged: (String value) => {
                              value != ""
                                  ? focusNodes[i + 1].requestFocus()
                                  : focusNodes[i - 1].requestFocus(),
                            },
                          ),
                        );
                      }),
                    ),
                  ],
                ),
                Column(
                  spacing: 24,
                  children: [
                    PrimaryButton(
                      onPressed: () => {navigationContract.pushTo('/login')},
                      text: "Entrar",
                      color: theme.getColorFor(ThemeCode.buttonPrimary),
                    ),
                    Column(
                      spacing: 8,
                      children: [
                        Text(
                          "¿No lo has recibido?",
                          style: TextStyle(fontSize: 18, letterSpacing: 0, height: 1.5),
                        ),
                        CustomTextButton(
                          onPressed: () => {},
                          text: "Volver a intentarlo",
                          size: 18,
                          weight: FontWeight.w500,
                        ),
                      ],
                    )
                  ],
                ),
                Spacer(flex: 10),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
