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,
          brightness: Brightness.light,
          backgroundColor: Colors.white,
          leading:
          IconButton( onPressed: (){
            Navigator.pop(context);
          },icon:Icon(Icons.arrow_back_ios,size: 20,color: Colors.black,)),
        ),
      body: 
      indexController.currentUser.length == 0 ?
      Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Column(
              children: [
                Column(
                  children: [
                    Container(
                      height: MediaQuery.of(context).size.height/5,
                      decoration: BoxDecoration(
                        image:DecorationImage(image: AssetImage('assets/images/login_image.jpg'))
                      ),
                    ),
                    SizedBox(height: 5,),

                  ],
                ),
                Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: 40
                  ),
                  child: Column(
                    children: [
                      makeInput(label: "email".tr, controller: emailController),
                      makeInput(label: "password".tr, controller: passwordController, obsureText: true),
                    ],
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 40),
                  child: Container(
                    padding: EdgeInsets.only(top: 3,left: 3),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(40),
                    ),
                    child: Obx((() => 
                      indexController.is_loading == true ? MaterialButton(
                      minWidth: double.infinity,
                      height:60,
                      onPressed: (){
                        
                      },
                      color: Colors.grey[400],
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(40)
                      ),
                      child: 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: Icon(Icons.assistant_photo_outlined, size: 40.0, color: Colors.blue),
                            snackPosition: SnackPosition.TOP,
                            duration: Duration(milliseconds: 800),
                            backgroundColor: Colors.yellow,
                            //icon:Image(image:AssetImage("assets/images/dora.png"))
                          );
                          return;
                        }
                        indexController.is_loading.value = true;
                        indexController.login(emailController.text, passwordController.text, context);
                      },
                      color: Colors.indigoAccent[400],
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(40)
                      ),
                      child: Text("ログイン",style: TextStyle(
                        fontWeight: FontWeight.w600,fontSize: 16,color: Colors.white70
                      ),
                      ),
                    ),
                    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: TextStyle(
                        fontWeight: FontWeight.w600,fontSize: 16,color: Colors.white70
                      ),
                      ),
                    ),
                    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: TextStyle(
                        fontWeight: FontWeight.w600,fontSize: 16,color: Colors.white70
                      ),
                      ),
                    )
                        ],
                      ) 
                    ),
                  ),
                )
                ),
                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: TextStyle(
                          overflow: TextOverflow.ellipsis,
                        ),),
                      ),
                    ),
                  ],
                )
              ],

            ),
          ],
        ),
      ):
      Container(
        child: TextButton(
          onPressed: (){
            indexController.currentUser.clear();
          },
          child: Text("Already Logged in, Click to logout"),
        ),
      )
      ,
    );
  }
}

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