import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ride/constant/box_name.dart';
import 'package:ride/constant/colors.dart';
import 'package:ride/constant/style.dart';
import 'package:ride/main.dart';
import 'package:ride/views/auth/captin/login_captin.dart';
import 'package:ride/views/widgets/elevated_btn.dart';
import 'package:ride/views/widgets/my_scafold.dart';

import '../../controller/auth/login_controller.dart';
import '../widgets/mycircular.dart';
import 'register_page.dart';

class LoginPage extends StatelessWidget {
  final controller = Get.put(LoginController());

  LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(LoginController());
    return GetBuilder<LoginController>(
      builder: (controller) => MyScafolld(
        title: 'Login'.tr,
        isleading: false,
        body: [
          if (box.read(BoxName.agreeTerms) != 'agreed')
            agreedPage()
          else
            SingleChildScrollView(
              child: Column(
                children: [
                  Padding(
                      padding: const EdgeInsets.all(25),
                      child: Container(
                        decoration: const BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                                offset: Offset(3, 3),
                                color: AppColor.accentColor,
                                blurRadius: 3)
                          ],
                          color: AppColor.secondaryColor,
                        ),
                        child: Form(
                          key: controller.formKey,
                          child: Padding(
                            padding: const EdgeInsets.all(16.0),
                            child: SingleChildScrollView(
                              child: Column(
                                children: [
                                  TextFormField(
                                    keyboardType: TextInputType.emailAddress,
                                    controller: controller.emailController,
                                    decoration: InputDecoration(
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: const BorderSide(
                                          color: AppColor.primaryColor,
                                          width: 2.0,
                                        ),
                                        borderRadius: BorderRadius.circular(10),
                                      ),
                                      fillColor: AppColor.accentColor,
                                      hoverColor: AppColor.accentColor,
                                      focusColor: AppColor.accentColor,
                                      border: const OutlineInputBorder(
                                          borderRadius: BorderRadius.all(
                                              Radius.circular(12))),
                                      labelText: 'Email'.tr,
                                      hintText: 'Enter your email address'.tr,
                                    ),
                                    validator: (value) {
                                      if (value!.isEmpty ||
                                          (!value.contains('@') ||
                                              !value.contains('.'))) {
                                        return 'Please enter Your Email.'.tr;
                                      }
                                      return null;
                                    },
                                  ),
                                  const SizedBox(
                                    height: 30,
                                  ),
                                  TextFormField(
                                    keyboardType: TextInputType.phone,
                                    cursorColor: AppColor.accentColor,
                                    controller: controller.phoneController,
                                    decoration: InputDecoration(
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: const BorderSide(
                                          color: AppColor.primaryColor,
                                          width: 2.0,
                                        ),
                                        borderRadius: BorderRadius.circular(10),
                                      ),
                                      focusColor: AppColor.accentColor,
                                      fillColor: AppColor.accentColor,
                                      border: const OutlineInputBorder(
                                          borderRadius: BorderRadius.all(
                                              Radius.circular(12))),
                                      labelText: 'Phone'.tr,
                                      hintText: 'Enter your phone number'.tr,
                                    ),
                                    validator: (value) {
                                      if (value!.isEmpty ||
                                          value.length != 10) {
                                        return 'Please enter your phone number.'
                                            .tr;
                                      }
                                      return null;
                                    },
                                  ),
                                  const SizedBox(
                                    height: 15,
                                  ),
                                  TextFormField(
                                    obscureText: true,
                                    keyboardType: TextInputType.emailAddress,
                                    controller: controller.passwordController,
                                    decoration: InputDecoration(
                                      focusedBorder: OutlineInputBorder(
                                        borderSide: const BorderSide(
                                          color: AppColor.primaryColor,
                                          width: 2.0,
                                        ),
                                        borderRadius: BorderRadius.circular(10),
                                      ),
                                      fillColor: AppColor.accentColor,
                                      hoverColor: AppColor.accentColor,
                                      focusColor: AppColor.accentColor,
                                      border: const OutlineInputBorder(
                                          borderRadius: BorderRadius.all(
                                              Radius.circular(12))),
                                      labelText: 'Password'.tr,
                                      hintText:
                                          'Please enter your phone number.'.tr,
                                    ),
                                    validator: (value) {
                                      if (value!.isEmpty ||
                                          (value.length > 6)) {
                                        return 'Please enter Your Password.'.tr;
                                      }
                                      return null;
                                    },
                                  ),
                                  GetBuilder<LoginController>(
                                    builder: (controller) => controller
                                            .isloading
                                        ? const MyCircularProgressIndicator()
                                        : MyElevatedButton(
                                            onPressed: () {
                                              if (controller
                                                  .formKey.currentState!
                                                  .validate()) {
                                                controller.login();
                                              }
                                            },
                                            title: 'Submit'.tr,
                                          ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                      )),
                  Text(
                    'if you dont have account'.tr,
                    style: AppStyle.subtitle,
                  ),
                  AnimatedTextKit(
                    onTap: () => Get.to(() => const RegisterPage()),
                    animatedTexts: [
                      TypewriterAnimatedText(
                        'Register'.tr,
                        textStyle: AppStyle.headtitle2,
                        speed: const Duration(milliseconds: 200),
                      ),
                    ],
                    totalRepeatCount: 4,
                    pause: const Duration(milliseconds: 200),
                    displayFullTextOnTap: true,
                    stopPauseOnTap: true,
                  ),
                  // GestureDetector(
                  //   onTap: () => Get.to(LoginCaptin()),
                  //   child: Text(
                  //     'If You Want be Captin Click Here.'.tr,
                  //     style: AppStyle.headtitle2,
                  //   ),
                  // )
                ],
              ),
            )
        ],
      ),
    );
  }

  Padding agreedPage() {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Image.asset(
                'assets/images/notepad.png',
                width: Get.width * .2,
              ),
              SizedBox(
                width: Get.width * .7,
                child: Text(
                  'Accept Ride\'s Terms & Review Privacy Notice'.tr,
                  style: AppStyle.headtitle2,
                ),
              ),
            ],
          ),
          const SizedBox(
            height: 30,
          ),
          Text(
            'By selecting "I Agree" below, I have reviewed and agree to the Terms of Use and acknowledge the Privacy Notice. I am at least 18 years of age.'
                .tr,
            style: AppStyle.title,
          ),
          const SizedBox(
            height: 100,
          ),
          GetBuilder<LoginController>(
            builder: (controller) => Column(
              children: [
                Row(
                  children: [
                    Checkbox.adaptive(
                      autofocus: true,
                      tristate: true,
                      splashRadius: 25,
                      activeColor: AppColor.primaryColor,
                      value: controller.isAgreeTerms,
                      onChanged: (value) => controller.changeAgreeTerm(),
                    ),
                    Text(
                      'I Agree'.tr,
                      style: controller.isAgreeTerms
                          ? AppStyle.title
                          : AppStyle.title
                              .copyWith(color: AppColor.accentColor),
                    ),
                  ],
                ),
                MyElevatedButton(
                    title: 'Submit'.tr,
                    onPressed: () => controller.saveAgreementTerms())
              ],
            ),
          )
        ],
      ),
    );
  }
}