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 LinkPhoneScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

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

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

    // TextEditingController phoneController = TextEditingController();
    // String? phone;

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.symmetric(horizontal: 24),
          child: Expanded(
            child: Center(
              child: Column(
                spacing: 48,
                children: [
                  Spacer(flex: 8),
                  Text(
                    "¡Nos alegra mucho tenerte por aquí!",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500, letterSpacing: 0),
                  ),
                  Text(
                    "Para poder entrar de forma segura, te vamos a enviar un código al teléfono",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 16, letterSpacing: 0),
                  ),
                  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",
                              numeric: true
                            )
                          ),
                        ],
                      ),
                    ],
                  ),
                  PrimaryButton(
                    onPressed: () => navigationContract.pushTo(AppRoutes.phoneCode),
                    text: "Siguiente",
                    color: theme.getColorFor(ThemeCode.buttonPrimary),
                  ),
                  Spacer(flex: 10)
                ],
              ),
            ),
          ),
        ),
    ));
  }
}
