import 'package:double_back_to_close_app/double_back_to_close_app.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_svg/svg.dart';

import 'package:get/get.dart';
import 'package:IQ/app/global/global_snackbar.dart';
import 'package:IQ/app/global/text_field.dart';
import 'package:IQ/main.dart';

import '../controllers/login_controller.dart';
import 'package:IQ/app/global/static_informs.dart';
import 'package:IQ/app/global/text_widget.dart';

// ignore: must_be_immutable
class LoginView extends GetView<LoginController> {
  LoginView({Key? key}) : super(key: key);
  LoginController c = Get.put(LoginController());
  @override
  Widget build(BuildContext context) {
    var loginScreen = Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: brandColor,
      appBar: AppBar(
        backgroundColor: brandColor,
        elevation: 0,
        leading: Container(),
      ),
      body: DoubleBackToCloseApp(
        snackBar: snackBar,
        child: GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Stack(
            alignment: Alignment.topCenter,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    height: 110 +
                        MediaQuery.of(context).viewPadding.top +
                        AppBar().preferredSize.height,
                  ),
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal: 35.0),
                    child: TextWidget(
                      color: labeledColor,
                      fontSize: 22,
                      text: "login_massage".tr,
                    ),
                  ),
                  const Spacer(),
                  Container(
                    margin: const EdgeInsets.symmetric(horizontal: 35.0),
                    child: TextWidget(
                      color: Colors.white,
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      text: 'login_title'.tr,
                    ),
                  ),
                  const Spacer(),
                  FormBuilder(
                    child: Column(
                      children: [
                        BuildTextField(
                          signup: false,
                          height: heightSize(context) * 0.1,
                          name: 'entered name',
                          controller: c.nameController,
                          suffixIcon: Image.asset(
                            'assets/entered_name_icon.png',
                            height: 50,
                            width: 50,
                            color: Colors.white,
                          ),
                          labelText: 'login_username'.tr,
                          margin: const EdgeInsets.only(
                            right: 30.0,
                            left: 30.0,
                            bottom: 10.0,
                          ),
                          errorMaxLines: 2,
                          onEditingComplete: () {
                            FocusScope.of(context).unfocus();
                          },
                          keyboardType: TextInputType.text,
                          onChanged: c.onChangedEnteredName,
                          textDirection: textDirection,
                          showCursor: true,
                        ),
                        GetBuilder(builder: (LoginController co) {
                          return BuildTextField(
                            signup: false,
                            height: heightSize(context) * 0.1,
                            name: 'password',
                            textDirection: textDirection,
                            controller: c.passwordController,
                            margin: const EdgeInsets.only(
                              right: 30.0,
                              left: 30.0,
                              bottom: 10.0,
                            ),
                            obscureText: co.isObscure,
                            showCursor: true,
                            suffix: SizedBox(
                              width: 100,
                              child: Row(
                                children: [
                                  IconButton(
                                    iconSize: 25,
                                    icon: Icon(
                                      c.isObscure
                                          ? Icons.visibility_off
                                          : Icons.visibility,
                                      color: Colors.white,
                                    ),
                                    onPressed: controller.onPressedEye,
                                  ),
                                  Image.asset(
                                    'assets/password_icon.png',
                                    height: 50,
                                    width: 50,
                                    color: Colors.white,
                                  )
                                ],
                              ),
                            ),
                            labelText: 'login_password'.tr,
                            onEditingComplete: () {
                              FocusScope.of(context).unfocus();
                            },
                            keyboardType: TextInputType.text,
                            errorMaxLines: 2,
                            onChanged: c.onChangedPassword,
                          );
                        }),
                      ],
                    ),
                  ),
                  const Spacer(),
                  Container(
                    margin: const EdgeInsets.symmetric(
                      horizontal: 15.0,
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            GetBuilder(
                                init: LoginController(),
                                builder: (LoginController c) {
                                  return Checkbox(
                                    value: c.checkedCheckbox ??
                                        storage
                                                .read('remember')
                                                .toString()
                                                .toLowerCase() ==
                                            'true',
                                    onChanged: c.onChangedCheckbox,
                                    fillColor: MaterialStateProperty.all(
                                      Colors.white,
                                    ),
                                    activeColor: Colors.white,
                                    checkColor: Colors.black,
                                  );
                                }),
                            TextWidget(
                              text: 'remember_me'.tr,
                              color: Colors.white,
                              fontSize: 20,
                            ),
                          ],
                        ),
                        Container(),
                      ],
                    ),
                  ),
                  const Spacer(),
                  Center(
                    child: Container(
                      margin: const EdgeInsets.only(
                        bottom: 10.0,
                      ),
                      width: 400,
                      height: 55,
                      child: ElevatedButton(
                        style: ButtonStyle(
                          // backgroundColor:
                          //     MaterialStateProperty.all(secondaryColor),

                          backgroundColor:
                              MaterialStateProperty.all(Colors.white),
                        ),
                        child: TextWidget(
                          fontSize: 28,
                          color: brandColor,
                          fontWeight: FontWeight.bold,
                          text: 'login_button'.tr,
                        ),
                        onPressed: controller.onPressedEnter,
                      ),
                    ),
                  ),
                  const Spacer(),
                  Container(),
                  const Spacer(flex: 2),
                ],
              ),
              SvgPicture.asset(
                'assets/2/icon.svg',
                height: 80,
                width: 80,
              ),
            ],
          ),
        ),
      ),
    );
    return GetBuilder(
      builder: (LoginController c) {
        return c.inputsEntered == true
            ? Stack(
                children: [
                  Opacity(
                    opacity: 0.3,
                    child: AbsorbPointer(
                      absorbing: true,
                      child: loginScreen,
                    ),
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: SvgPicture.asset("assets/autologin_loading.svg"),
                  ),
                ],
              )
            : loginScreen;
      },
    );
  }
}