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/components/bottom_sheet.dart';
import 'package:prosappco/src/components/column_padding.dart';
import 'package:prosappco/src/components/primary_btn.dart';
import 'package:prosappco/src/controllers/otp_controller.dart';
import 'package:prosappco/src/controllers/phone_auth_controller.dart';

class CodeValidationScreen extends StatelessWidget {
  CodeValidationScreen({super.key, this.phoneNumber});
  String? phoneNumber;

  final controller = Get.put(OTPController());

  @override
  Widget build(BuildContext context) {
    var otp;

    return BottomSheetExpanded(
      horizontalPadding: 10,
      children: [
        Row(
          children: [
            IconButton(
              icon: const Icon(
                Icons.arrow_back,
                size: 30,
              ),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            const Text(
              'Validar código',
              style: TextStyle(
                color: Color(0xFF262626),
                fontSize: 38.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
        ColumnPadding(
          alineacion: MainAxisAlignment.start,
          padding: const EdgeInsets.symmetric(horizontal: 25),
          children: [
            const SizedBox(height: 10),
            const SizedBox(
              width: double.infinity,
              child: Text(
                'Numero de celular',
                style: TextStyle(
                  fontSize: 18.0,
                  color: Color(0xFF65676B),
                ),
              ),
            ),
            const SizedBox(height: 10),
            Row(
              children: [
                Expanded(
                  child: TextField(
                    onChanged: (value) {
                      phoneNumber = value;
                    },
                    controller: TextEditingController(text: phoneNumber ?? ''),
                    decoration: const InputDecoration(
                      border: InputBorder.none,
                      hintText: '',
                      suffixIcon: Icon(Icons.edit),
                    ),
                  ),
                ),
                TextButton(
                  child: const Text('Reenviar código'),
                  onPressed: () {
                    if (phoneNumber!.isNotEmpty) {
                      PhoneAuthController.instance.phoneAuthentication(
                        phoneNumber!,
                      );
                    }
                  },
                ),
              ],
            ),
            const SizedBox(height: 10),
            const SizedBox(
              width: double.infinity,
              child: Text(
                'Codigo',
                textAlign: TextAlign.left,
                style: TextStyle(
                  fontSize: 18.0,
                  color: Color(0xFF65676B),
                ),
              ),
            ),
            const SizedBox(height: 10),
            OtpTextField(
              numberOfFields: 6,
              focusedBorderColor: Colors.blue,
              fillColor: Colors.black.withOpacity(0.1),
              filled: true,
              keyboardType: TextInputType.number,
              onSubmit: (code) {
                otp = code;
                OTPController.instance.verifyOTP(otp);
              },
            ),
            const SizedBox(height: 40),
            PrimaryButtom(
              onPressed: () {
                OTPController.instance.verifyOTP(otp);
              },
              label: 'Validar código',
            ),
            const SizedBox(height: 30),
          ],
        ),
      ],
    );
  }
}