import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:intl_phone_field/intl_phone_field.dart';
import 'package:prosappco/components/general_input_decoration.dart';
import 'package:prosappco/components/general_primary_button.dart';
import 'package:prosappco/screens/authentication/otp_auth_screen.dart';
import 'package:prosappco/screens/authentication/sign_screen.dart';

class WelcomeScreen extends StatelessWidget {
  const WelcomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    String? _phoneNumber;
    String? _errorMsg;

    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.tertiary,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 20),
            child: Center(
              child: Image(
                width: width * 0.7,
                image: const AssetImage('images/logo_prosapp.png'),
              ),
            ),
          ),
          Expanded(
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(60),
                  topRight: Radius.circular(60),
                ),
              ),
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      SizedBox(
                        width: double.infinity,
                        child: Text(
                          'Iniciar sesión',
                          style: TextStyle(
                            // fontSize: 30,
                            fontSize: width * 0.08,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      const SizedBox(height: 10),
                      SizedBox(
                        width: double.infinity,
                        child: Text(
                          'Numero de celular',
                          style: TextStyle(
                            fontSize: width * 0.045,
                            color: Theme.of(context).colorScheme.onBackground,
                          ),
                        ),
                      ),
                      Form(
                        child: IntlPhoneField(
                          initialCountryCode: 'CO',
                          keyboardType: TextInputType.number,
                          inputFormatters: [
                            FilteringTextInputFormatter.digitsOnly
                          ],
                          validator: (value) {
                            if (value == null) {
                              return 'Ingresa un numero';
                            } else {
                              return null;
                            }
                          },
                          onChanged: (phone) {
                            _phoneNumber = phone.completeNumber;
                          },
                          decoration: GeneralInputDecoration.getCustomDecoration(
                            context: context,
                            hintText: 'Ingresa tu numero',
                            errorMsg: _errorMsg,
                          ),
                        ),
                      ),
                      Text('Un código será enviado a este numero de celular.',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 13.0,color: Theme.of(context).colorScheme.onBackground),
                      ),
                      GeneralPrimaryButton(
                        onPressed: () {
                          final phoneNumber = _phoneNumber;

                          if (phoneNumber != null && phoneNumber.isNotEmpty) {
                            Navigator.push(context,
                              CupertinoPageRoute(
                                builder: (context) => OtpAuthScreen(phoneNumber: phoneNumber),
                              ),
                            );
                          }
                        },
                        label: 'Enviar código',
                      ),
                      // ElevatedButton(
                      //   onPressed: () {
                      //     final phoneNumber = _phoneNumber;

                      //     if (phoneNumber != null && phoneNumber.isNotEmpty) {
                      //       Navigator.push(
                      //         context,
                      //         CupertinoPageRoute(
                      //           builder: (context) =>
                      //               OtpAuthScreen(phoneNumber: phoneNumber),
                      //         ),
                      //       );
                      //     } else {}
                      //   },
                      //   child: const Text('Enviar código'),
                      // ),
                      TextButton(
                        onPressed: () {
                          Navigator.push(
                            context,
                            CupertinoPageRoute(
                              builder: (context) =>
                                  const SignScreen(initialIndex: 0),
                            ),
                          );
                        },
                        child: Text(
                          'Inicia sesión con tu correo electrónico',
                          style: TextStyle(
                            fontSize: width * 0.04,
                          ),
                        ),
                      ),
                      RichText(
                        text: TextSpan(
                          style: const TextStyle(
                            fontSize: 16.0,
                            color: Color(0xFF65676B),
                            fontFamily: 'Poppins',
                          ),
                          children: [
                            const TextSpan(text: '¿No estás registrado? '),
                            TextSpan(
                              text: 'Regístrate',
                              style: TextStyle(
                                fontSize: width * 0.04,
                                color: Colors.blue,
                                fontWeight: FontWeight.w600,
                              ),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  Navigator.push(
                                    context,
                                    CupertinoPageRoute(
                                      builder: (context) =>
                                          SignScreen(initialIndex: 1),
                                    ),
                                  );
                                },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}