import 'package:flutter/material.dart';
import 'package:flutter_otp_text_field/flutter_otp_text_field.dart';
import 'package:get/get.dart';
import 'package:prosappco/src/controllers/otp_controller.dart';

class CodeValidationScreen extends StatefulWidget {
  const CodeValidationScreen({super.key});

  @override
  State<CodeValidationScreen> createState() => _CodeValidationScreenState();
}

class _CodeValidationScreenState extends State<CodeValidationScreen> {
  final controller = Get.put(OTPController());

  @override
  Widget build(BuildContext context) {
    var otp;
    return SafeArea(
        child: Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xFFD6F4FF),
      body: Stack(
        children: [
          Container(
            margin: const EdgeInsets.only(top: 280),
            width: double.infinity,
            height: 600,
            decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    topRight: Radius.circular(50),
                    topLeft: Radius.circular(50))),
          ),
          Container(
            margin: const EdgeInsets.only(top: 120, left: 70, right: 70),
            child: const Image(image: AssetImage('images/logo_prosapp.png')),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
            margin: const EdgeInsets.only(top: 280, left: 25),
            child: Row(
              children: <Widget>[
                IconButton(
                  icon: Icon(
                    Icons.arrow_back,
                    size: 30,
                  ),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                Text(
                  'Validar código',
                  style: TextStyle(
                    color: Color(0xFF262626),
                    fontSize: 38.0,
                    fontWeight: FontWeight.bold,
                  ),
                  textAlign: TextAlign.right,
                ),
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
            margin: const EdgeInsets.only(top: 350, left: 50, right: 50),
            child: Column(children: [
              const Padding(
                  padding: EdgeInsets.only(bottom: 5),
                  child: Align(
                    alignment: Alignment.topLeft,
                    child: Text('Numero de celular',
                        style: TextStyle(
                            fontSize: 18.0, color: Color(0xFF65676B))),
                  )),
              Padding(
                padding: EdgeInsets.only(bottom: 20),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: '+57',
                          suffixIcon: Icon(Icons.edit),
                        ),
                      ),
                    ),
                    TextButton(
                      onPressed: () {
                        // Acción a realizar cuando se hace clic en el texto
                      },
                      child: Text('Reenviar código'),
                    ),
                  ],
                ),
              ),
              Align(
                alignment: Alignment.topLeft,
                child: Padding(
                  padding: const EdgeInsets.only(bottom: 5),
                  child: Text('Codigo',
                      textAlign: TextAlign.left,
                      style:
                          TextStyle(fontSize: 18.0, color: Color(0xFF65676B))),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 20),
                child: OtpTextField(
                  numberOfFields: 6,
                  fillColor: Colors.black.withOpacity(0.1),
                  filled: true,
                  keyboardType: TextInputType.number,
                  onSubmit: (code) {
                    otp = code;
                    OTPController.instance.verifyOTP(otp);
                  },
                ),
                // child: TextField(
                //   onSubmitted:
                //   maxLength: 6,
                //   keyboardType: TextInputType.number,
                //   decoration: InputDecoration(
                //     enabledBorder: OutlineInputBorder(
                //       borderSide: BorderSide(color: Color(0xFFECECEC)),
                //       borderRadius: BorderRadius.all(
                //         Radius.circular(50),
                //       ),
                //     ),
                //     focusedBorder: OutlineInputBorder(
                //       borderSide: BorderSide(color: Color(0xFFECECEC)),
                //       borderRadius: BorderRadius.all(
                //         Radius.circular(50),
                //       ),
                //     ),
                //     hintText: '_ _ _ _ _ _',
                //     fillColor: Color.fromARGB(255, 239, 239, 239),
                //     filled: true,
                //   ),
                //   textAlign: TextAlign.center,
                //   style: TextStyle(
                //     letterSpacing: 10.0,
                //   ),
                // ),
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 40),
                child: Center(
                    child: ElevatedButton(
                  onPressed: () {
                    OTPController.instance.verifyOTP(otp);
                  },
                  child: Text(
                    'Validar código',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                    primary: Color(0xFF2BA4EC), // Color del botón
                    shape: RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.circular(50), // Bordes redondeados
                    ),
                    elevation: 0,
                    minimumSize: Size(230, 60), // Tamaño mínimo del botón
                  ),
                )),
              ),
            ]),
          ),
        ],
      ),
    ));
  }
}