import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:rogapp/pages/index/index_controller.dart';
import 'package:rogapp/routes/app_pages.dart';

class LoginPopupPage extends StatelessWidget {
  LoginPopupPage({Key? key}) : super(key: key);

  final IndexController indexController = Get.find<IndexController>();

  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        leading: IconButton(
            onPressed: () {
              Navigator.pop(context);
            },
            icon: const Icon(
              Icons.arrow_back_ios,
              size: 20,
              color: Colors.black,
            )),
      ),
      body: indexController.currentUser.isEmpty
          ? SizedBox(
              width: double.infinity,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Column(
                    children: [
                      Column(
                        children: [
                          Container(
                            height: MediaQuery.of(context).size.height / 5,
                            decoration: const BoxDecoration(
                                image: DecorationImage(
                                    image: AssetImage(
                                        'assets/images/login_image.jpg'))),
                          ),
                          const SizedBox(
                            height: 5,
                          ),
                        ],
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 40),
                        child: Column(
                          children: [
                            makeInput(
                                label: "email".tr, controller: emailController),
                            makeInput(
                                label: "password".tr,
                                controller: passwordController,
                                obsureText: true),
                          ],
                        ),
                      ),
                      Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 40),
                          child: Container(
                            padding: const EdgeInsets.only(top: 3, left: 3),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(40),
                            ),
                            child: Obx(
                              (() => indexController.isLoading.value == true
                                  ? MaterialButton(
                                      minWidth: double.infinity,
                                      height: 60,
                                      onPressed: () {},
                                      color: Colors.grey[400],
                                      shape: RoundedRectangleBorder(
                                          borderRadius:
                                              BorderRadius.circular(40)),
                                      child: const CircularProgressIndicator(),
                                    )
                                  : Column(
                                      children: [
                                        MaterialButton(
                                          minWidth: double.infinity,
                                          height: 60,
                                          onPressed: () {
                                            if (emailController.text.isEmpty ||
                                                passwordController
                                                    .text.isEmpty) {
                                              Get.snackbar(
                                                "no_values".tr,
                                                "email_and_password_required"
                                                    .tr,
                                                icon: const Icon(
                                                    Icons
                                                        .assistant_photo_outlined,
                                                    size: 40.0,
                                                    color: Colors.blue),
                                                snackPosition:
                                                    SnackPosition.TOP,
                                                duration: const Duration(
                                                    milliseconds: 800),
                                                backgroundColor: Colors.yellow,
                                                //icon:Image(image:AssetImage("assets/images/dora.png"))
                                              );
                                              return;
                                            }
                                            indexController.isLoading.value =
                                                true;
                                            indexController.login(
                                                emailController.text,
                                                passwordController.text,
                                                context);
                                          },
                                          color: Colors.indigoAccent[400],
                                          shape: RoundedRectangleBorder(
                                              borderRadius:
                                                  BorderRadius.circular(40)),
                                          child: const Text(
                                            "ログイン",
                                            style: TextStyle(
                                                fontWeight: FontWeight.w600,
                                                fontSize: 16,
                                                color: Colors.white70),
                                          ),
                                        ),
                                        const SizedBox(
                                          height: 19.0,
                                        ),
                                        MaterialButton(
                                          minWidth: double.infinity,
                                          height: 50,
                                          onPressed: () {
                                            Get.toNamed(AppPages.REGISTER);
                                          },
                                          color: Colors.redAccent,
                                          shape: RoundedRectangleBorder(
                                              borderRadius:
                                                  BorderRadius.circular(40)),
                                          child: Text(
                                            "sign_up".tr,
                                            style: const TextStyle(
                                                fontWeight: FontWeight.w600,
                                                fontSize: 16,
                                                color: Colors.white70),
                                          ),
                                        ),
                                        const SizedBox(
                                          height: 19.0,
                                        ),
                                        MaterialButton(
                                          minWidth: double.infinity,
                                          height: 50,
                                          onPressed: () {
                                            Get.toNamed(AppPages.TRAVEL);
                                          },
                                          color: Colors.grey,
                                          shape: RoundedRectangleBorder(
                                              borderRadius:
                                                  BorderRadius.circular(40)),
                                          child: Text(
                                            "cancel".tr,
                                            style: const TextStyle(
                                                fontWeight: FontWeight.w600,
                                                fontSize: 16,
                                                color: Colors.white70),
                                          ),
                                        )
                                      ],
                                    )),
                            ),
                          )),
                      const SizedBox(
                        height: 20,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Flexible(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                "rogaining_user_need_tosign_up".tr,
                                style: const TextStyle(
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ],
              ),
            )
          : TextButton(
              onPressed: () {
                indexController.currentUser.clear();
              },
              child: const Text("Already Logged in, Click to logout"),
            ),
    );
  }
}

Widget makeInput(
    {label, required TextEditingController controller, obsureText = false}) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        label,
        style: const TextStyle(
            fontSize: 15, fontWeight: FontWeight.w400, color: Colors.black87),
      ),
      const SizedBox(
        height: 5,
      ),
      TextField(
        controller: controller,
        obscureText: obsureText,
        decoration: InputDecoration(
          contentPadding:
              const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: (Colors.grey[400])!,
            ),
          ),
          border: OutlineInputBorder(
            borderSide: BorderSide(color: (Colors.grey[400])!),
          ),
        ),
      ),
      const SizedBox(
        height: 30.0,
      )
    ],
  );
}