import 'package:auth/src/features/recover_password/presentation/sent_screen.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:navigation/navigation.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class RestorePasswordScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

  @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: 48,
            children: [
              Spacer(flex: 8),
              Column(
                spacing: 32,
                children: [
                  Text(
                    "Recuperar contaseña",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                  ),
                  Text(
                    "Introduce tu email para enviarte un enlace de recuperación",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 18, letterSpacing: 0),
                  ),
                ],
              ),
              Column(
                spacing: 40,
                children: [
                  CustomTextField(
                    label: "Correo electrónico",
                    hint: "Correo electrónico",
                  ),
                  Column(
                    spacing: 8,
                    children: [
                      Align(
                        alignment: Alignment.bottomLeft,
                        child: Text(
                          "Teléfono móvil",
                          style: TextStyle(fontSize: 14, letterSpacing: 0),
                        ),
                      ),
                      Row(
                        spacing: 10,
                        children: [
                          CustomDropdown(
                            value: 0,
                            items: [
                              Icon(Icons.outlined_flag),
                              Icon(Icons.outlined_flag),
                              Icon(Icons.outlined_flag),
                            ],
                            onChanged: (value) => {},
                            width: 80,
                          ),
                          Expanded(
                            child: CustomTextField(
                              hint: "Teléfono",
                              keyboardType: TextInputType.number,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Row(
                    spacing: 20,
                    children: [
                      Expanded(
                        child: SecondaryButton(
                          onPressed: () => {Navigator.pop(context)},
                          text: "Volver",
                        ),
                      ),
                      Expanded(
                        child: PrimaryButton(
                          onPressed: () => {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (_) => SentScreen(format: "email"),
                              ),
                            ),
                          },
                          text: "Enviar",
                          size: 16,
                          color: theme.getColorFor(ThemeCode.buttonSecondary),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              Spacer(flex: 10),
            ],
          ),
        ),
      ),
    );
  }
}
