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/screens/authentication/sign_screen.dart';

class WelcomeScreen extends StatelessWidget {
  const WelcomeScreen({Key? key});

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

    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
                          ],
                        ),
                      ),
                      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,
                        ),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          Navigator.push(
                            context,
                            CupertinoPageRoute(
                              builder: (context) =>
                                  const SignScreen(initialIndex: 1),
                            ),
                          );
                        },
                        child: const Text('Iniciar Sesión'),
                      ),
                      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),
                                    ),
                                  );
                                },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );

    // Scaffold(
    //   backgroundColor: Theme.of(context).colorScheme.surface,
    //   body: Column(
    //     children: [
    //       Container(
    //         color: Theme.of(context).colorScheme.tertiary,
    //         child: Column(
    //           children: [
    //             const SizedBox(height: 20),
    //             Center(
    //               child: Image(
    //                 width: width * 0.7,
    //                 image: const AssetImage('images/logo_prosapp.png'),
    //               ),
    //             ),
    //             const SizedBox(height: 20),
    //           ],
    //         ),
    //       ),
    //       SizedBox(
    //         width: double.infinity,
    //         child: Text(
    //           'Iniciar sesión',
    //           style: TextStyle(
    //             // fontSize: 30,
    //             fontSize: width * 0.08,
    //             fontWeight: FontWeight.bold,
    //           ),
    //         ),
    //       ),
    //       Expanded(
    //         child: SingleChildScrollView(
    //           child: Column(
    //             children: [
    //               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],
    //                 ),
    //               ),
    //               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,
    //                 ),
    //               ),
    //               TextButton(
    //                 onPressed: () {
    //                   Navigator.push(
    //                     context,
    //                     CupertinoPageRoute(
    //                       builder: (context) => 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),
    //                             ),
    //                           );
    //                         },
    //                     ),
    //                   ],
    //                 ),
    //               ),
    //             ],
    //           ),
    //         ),
    //       ),
    //     ],
    //   ),
    // );

    // Scaffold(
    //   backgroundColor: Theme.of(context).colorScheme.surface,
    //   body: ListView(
    //     children: [
    //       Container(
    //         color: Theme.of(context).colorScheme.tertiary,
    //         padding: const EdgeInsets.symmetric(vertical: 20.0),
    //         child: Center(
    //           child: Image(
    //             width: width * 0.7,
    //             image: const AssetImage('images/logo_prosapp.png'),
    //           ),
    //         ),
    //       ),
    //       Container(
    //         decoration: const BoxDecoration(
    //           color: Colors.white,
    //           borderRadius: BorderRadius.only(
    //             topLeft: Radius.circular(60),
    //             topRight: Radius.circular(60),
    //           ),
    //         ),
    //         child: Padding(
    //           padding: const EdgeInsets.all(20.0),
    //           child: Column(
    //             mainAxisAlignment: MainAxisAlignment.center,
    //             children: [
    //               const TextField(
    //                 decoration: InputDecoration(
    //                   labelText: 'Usuario',
    //                   border: OutlineInputBorder(),
    //                 ),
    //               ),
    //               const SizedBox(height: 20.0),
    //               const TextField(
    //                 decoration: InputDecoration(
    //                   labelText: 'Contraseña',
    //                   border: OutlineInputBorder(),
    //                 ),
    //                 obscureText: true,
    //               ),
    //               const SizedBox(height: 20.0),
    //
    //             ],
    //           ),
    //         ),
    //       ),
    //     ],
    //   ),
    // );
  }
}