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/widgets/elevated_btn.dart';
import 'package:ride/views/widgets/my_scafold.dart';

import '../../controller/auth/login_controller.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 MyScafolld(title: 'Login', 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(
                                  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(
                                  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(
                                  fillColor: AppColor.accentColor,
                                  hoverColor: AppColor.accentColor,
                                  focusColor: AppColor.accentColor,
                                  border: const OutlineInputBorder(
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(12))),
                                  labelText: 'Password'.tr,
                                  hintText: 'Enter your Password'.tr,
                                ),
                                validator: (value) {
                                  if (value!.isEmpty || (value.length > 6)) {
                                    return 'Please enter Your Password.'.tr;
                                  }
                                  return null;
                                },
                              ),
                              MyElevatedButton(
                                onPressed: () {
                                  if (controller.formKey.currentState!
                                      .validate()) {
                                    controller.login();
                                  }
                                },
                                title: 'Submit',
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  )),
              Text(
                'if you dont have account'.tr,
                style: AppStyle.subtitle,
              ),
              AnimatedTextKit(
                onTap: () => Get.to(() => RegisterPage()),
                animatedTexts: [
                  TypewriterAnimatedText(
                    'Register',
                    textStyle: AppStyle.headtitle2,
                    speed: const Duration(milliseconds: 200),
                  ),
                ],
                totalRepeatCount: 4,
                pause: const Duration(milliseconds: 200),
                displayFullTextOnTap: true,
                stopPauseOnTap: true,
              )
            ],
          ),
        )
    ]);
  }

  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',
                    onPressed: () => controller.saveAgreementTerms())
              ],
            ),
          )
        ],
      ),
    );
  }
}