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';
import 'package:responsive_builder/responsive_builder.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ScreenTypeLayout.builder(
      mobile: (BuildContext context) => _mobileView(context),
      tablet: (BuildContext context) => _mobileView(context),
      desktop: (BuildContext context) => _desktopView(context),
    );
  }

  Widget _mobileView(BuildContext context) {
    return BottomSheetExpanded(
      horizontalPadding: 10,
      children: [
        Row(
          children: [
            IconButton(
              icon: const Icon(
                Icons.arrow_back,
                size: 30,
              ),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            const Text(
              'Valida el código',
              style: TextStyle(
                color: Color(0xFF262626),
                fontSize: 30.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: 'Valida el código',
            ),
            const SizedBox(height: 30),
          ],
        ),
      ],
    );
  }

  Widget _desktopView(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: const Color(0xFFD6F4FF),
      body: SizedBox(
        height: height,
        width: width,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              child: SizedBox(
                height: height,
                child: const Center(
                  child: Image(
                    image: AssetImage('images/logo_prosapp.png'),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: width * 0.07),
                color: Colors.white,
                height: height,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      children: [
                        IconButton(
                          icon: const Icon(
                            Icons.arrow_back,
                            size: 30,
                          ),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                        SizedBox(width: width * 0.01),
                        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: 'Valida el código',
                        ),
                        const SizedBox(height: 30),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}