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

import '../../constant/colors.dart';

class RegisterPage extends StatelessWidget {
  const RegisterPage({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(RegisterController());
    return MyScafolld(
        title: 'Register'.tr,
        body: [
          GetBuilder<RegisterController>(
            builder: (controller) => Form(
              key: controller.formKey,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: SingleChildScrollView(
                  child: Container(
                    decoration: const BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                            offset: Offset(3, 3),
                            color: AppColor.accentColor,
                            blurRadius: 3)
                      ],
                      color: AppColor.secondaryColor,
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(16),
                      child: Column(children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            SizedBox(
                              width: Get.width * .4,
                              child: TextFormField(
                                keyboardType: TextInputType.text,
                                controller: controller.firstNameController,
                                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: 'First name'.tr,
                                  hintText: 'Enter your first name'.tr,
                                ),
                                validator: (value) {
                                  if (value!.isEmpty) {
                                    return 'Please enter your first name.'.tr;
                                  }
                                  return null;
                                },
                              ),
                            ),
                            SizedBox(
                              width: Get.width * .4,
                              child: TextFormField(
                                keyboardType: TextInputType.text,
                                controller: controller.lastNameController,
                                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: 'Last name'.tr,
                                  hintText: 'Enter your last name'.tr,
                                ),
                                validator: (value) {
                                  if (value!.isEmpty) {
                                    return 'Please enter your last name.'.tr;
                                  }
                                  return null;
                                },
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(
                          height: 15,
                        ),
                        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: 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: 'Enter your Password'.tr,
                          ),
                          validator: (value) {
                            if (value!.isEmpty) {
                              return 'Please enter Your Password.'.tr;
                            }
                            if (value.length < 6) {
                              return 'Password must br at least 6 character.'
                                  .tr;
                            }
                            return null;
                          },
                        ),
                        const SizedBox(
                          height: 15,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            SizedBox(
                              width: Get.width * .4,
                              child: 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;
                                },
                              ),
                            ),
                            SizedBox(
                              width: Get.width * .4,
                              child: TextFormField(
                                keyboardType: TextInputType.text,
                                controller: controller.siteController,
                                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: 'City'.tr,
                                  hintText: 'Enter your City'.tr,
                                ),
                                validator: (value) {
                                  if (value!.isEmpty) {
                                    return 'Please enter your City.'.tr;
                                  }
                                  return null;
                                },
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(
                          height: 15,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            InkWell(
                              onTap: () => controller.getBirthDate(),
                              child: Container(
                                height: 50,
                                width: Get.width * .4,
                                decoration: BoxDecoration(
                                    border: Border.all(),
                                    borderRadius: BorderRadius.circular(13)),
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 20),
                                  child: Text(
                                    controller.birthDate,
                                    style: AppStyle.title,
                                  ),
                                ),
                              ),
                            ),
                            // DropdownButton(
                            //   value: controller.gender,
                            //   items: [
                            //     DropdownMenuItem(
                            //       value: 'Male'.tr,
                            //       child: Text('Male'.tr),
                            //     ),
                            //     DropdownMenuItem(
                            //       value: 'Female'.tr,
                            //       child: Text('Female'.tr),
                            //     ),
                            //     DropdownMenuItem(
                            //       value: '--'.tr,
                            //       child: Text('--'.tr),
                            //     ),
                            //   ],
                            //   onChanged: (value) {
                            //     controller.changeGender(value!);
                            //   },
                            // )
                          ],
                        ),
                        MyElevatedButton(
                            title: 'Register'.tr,
                            onPressed: () => controller.register())
                      ]),
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
        isleading: true);
  }
}