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 RegisterPage extends StatelessWidget {
  final IndexController indexController = Get.find<IndexController>();

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

  RegisterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      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: SafeArea(
        child: SingleChildScrollView(
          child: SizedBox(
            height: MediaQuery.of(context).size.height,
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text(
                          "sign_up".tr,     // "サインアップ"
                          style: const TextStyle(
                            fontSize: 30,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(
                          height: 20,
                        ),
                        Text(
                          "create_account".tr,  // アカウントを無料で作成します。
                          style: TextStyle(
                            fontSize: 15,
                            color: Colors.grey[700],
                          ),
                        ),
                        const SizedBox(
                          height: 30,
                        )
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 40),
                      child: Column(
                        children: [
                          makeInput(label: "email".tr, controller: emailController),  // メールアドレス
                          makeInput(
                              label: "password".tr,
                              controller: passwordController,
                              obsureText: true),                  // パスワード
                          makeInput(
                              label: "confirm_password".tr,
                              controller: confirmPasswordController,
                              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),
                            border: const Border(
                                bottom: BorderSide(color: Colors.black),
                                top: BorderSide(color: Colors.black),
                                right: BorderSide(color: Colors.black),
                                left: BorderSide(color: Colors.black))),
                        child: MaterialButton(
                          minWidth: double.infinity,
                          height: 60,
                          onPressed: () {
                            if (passwordController.text !=
                                confirmPasswordController.text) {
                              Get.snackbar(
                                "no_match".tr,
                                "password_does_not_match".tr,
                                  backgroundColor: Colors.red,
                                  colorText: Colors.white,
                                  icon: const Icon(Icons.assistant_photo_outlined,
                                    size: 40.0, color: Colors.blue),
                                snackPosition: SnackPosition.TOP,
                                duration: const Duration(seconds: 3),
                               // backgroundColor: Colors.yellow,
                                //icon:Image(image:AssetImage("assets/images/dora.png"))
                              );
                            }
                            if (emailController.text.isEmpty ||
                                passwordController.text.isEmpty) {
                              Get.snackbar(
                                "no_values".tr,
                                "email_and_password_required".tr,
                                  backgroundColor: Colors.red,
                                  colorText: Colors.white,
                                  icon: const Icon(Icons.assistant_photo_outlined,
                                    size: 40.0, color: Colors.blue),
                                snackPosition: SnackPosition.TOP,
                                duration: const Duration(seconds: 3),
                                //backgroundColor: Colors.yellow,
                                //icon:Image(image:AssetImage("assets/images/dora.png"))
                              );
                              return;
                            }
                            indexController.isLoading.value = true;
                            indexController.register(emailController.text,
                                passwordController.text, context);
                          },
                          color: Colors.redAccent,
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(40)),
                          child: Text(
                            "sign_up".tr,
                            style: const TextStyle(
                              fontWeight: FontWeight.w600,
                              fontSize: 16,
                            ),
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                         Flexible(child: Text("already_have_account".tr)),
                        TextButton(
                          onPressed: () {
                            Get.toNamed(AppPages.LOGIN);
                          },
                          child:  Text(
                            "login".tr,
                            style: TextStyle(
                                fontWeight: FontWeight.w600, fontSize: 18),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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,
      )
    ],
  );
}