import 'package:SEFER/constant/style.dart';
import 'package:SEFER/controller/auth/register_controller.dart';
import 'package:SEFER/views/widgets/elevated_btn.dart';
import 'package:SEFER/views/widgets/my_scafold.dart';
import 'package:SEFER/views/widgets/my_textField.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class SmsSignupEgypt extends StatelessWidget {
  SmsSignupEgypt({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(RegisterController());
    return MyScafolld(
      title: 'Phone Check'.tr,
      body: [
        GetBuilder<RegisterController>(builder: (registerController) {
          return ListView(
            // mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Logo at the top
              Padding(
                padding: const EdgeInsets.only(bottom: 20.0),
                child: Image.asset(
                  'assets/images/logo.png', // Make sure you have a logo image in your assets folder
                  height: 100,
                ),
              ),
              // Message to the driver
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                child: Text(
                  'We need your phone number to contact you and to help you.'
                      .tr,
                  textAlign: TextAlign.center,
                  style: AppStyle.title,
                ),
              ),
              // Enter phone number text
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                child: Text(
                  'Enter your phone number'.tr,
                  textAlign: TextAlign.center,
                  style: AppStyle.title,
                ),
              ),
              // Phone number input field
              Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: !registerController.isSent
                      ? Form(
                          key: registerController.formKey3,
                          child: MyTextForm(
                              controller: registerController.phoneController,
                              label: 'Enter your phone number'.tr,
                              hint: 'Enter your phone number'.tr,
                              type: TextInputType.phone),
                        )
                      : Container(
                          decoration: AppStyle.boxDecoration1,
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              registerController.phoneController.text,
                              style: AppStyle.title,
                            ),
                          ),
                        )),
              const SizedBox(
                height: 10,
              ),
              if (registerController.isSent)
                Obx(() => Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16.0),
                          child: registerController.remainingTime > 0
                              ? Column(
                                  children: [
                                    Text(
                                      '${(registerController.remainingTime / 60).floor()}:${(registerController.remainingTime % 60).toString().padLeft(2, '0')} remaining',
                                      style: AppStyle.subtitle,
                                      textAlign: TextAlign.center,
                                    ),
                                    const SizedBox(height: 8),
                                    LinearProgressIndicator(
                                      value: registerController.remainingTime /
                                          300, // Assuming 300 seconds (5 minutes) total
                                      backgroundColor: Colors.grey[300],
                                      valueColor: AlwaysStoppedAnimation<Color>(
                                          Theme.of(context).primaryColor),
                                    ),
                                  ],
                                )
                              : TextButton(
                                  onPressed: () =>
                                      registerController.sendOtpMessage(),
                                  child: Text('Resend code'.tr),
                                ),
                        ),
                        const SizedBox(
                            height:
                                16), // Add some space after the timer or button
                      ],
                    )),
              Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: registerController.isSent
                      ? Form(
                          key: registerController.formKey3,
                          child: MyTextForm(
                              controller: registerController.verifyCode,
                              label: '5 digit'.tr,
                              hint: '5 digit'.tr,
                              type: TextInputType.number),
                        )
                      : const SizedBox()),
              // Submit button
              MyElevatedButton(
                onPressed: () async {
                  !registerController.isSent
                      ? await registerController.sendOtpMessage()
                      : await registerController.verifySMSCode();
                },
                title: 'Submit'.tr,
              ),
            ],
          );
        }),
      ],
      isleading: true,
    );
  }
}