import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sk_base_mobile/app_theme.dart';
import 'package:sk_base_mobile/screens/login/login.controller.dart';
import 'package:sk_base_mobile/util/screen_adaper_util.dart';

class LoginScreen extends StatelessWidget {
  LoginScreen({super.key});
  final _controller = Get.put<LoginController>(LoginController());
  final double formWidth = 700;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/bg.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: buildBody()));
  }

  Widget buildBody() {
    return GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          // 点击空白处时收起键盘
          FocusScope.of(Get.context!).unfocus();
        },
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image(
                        height: ScreenAdaper.width(150),
                        image: const AssetImage(
                          'assets/images/company_logo.png',
                        )),
                    SizedBox(
                      width: ScreenAdaper.width(10),
                    ),
                    Stack(
                      alignment: Alignment.center,
                      children: [
                        Text(
                          '山矿通',
                          style: TextStyle(
                              shadows: [
                                Shadow(
                                  color: Colors.black,
                                  blurRadius: ScreenAdaper.sp(10),
                                  offset: Offset(ScreenAdaper.width(5),
                                      ScreenAdaper.height(5)),
                                ),
                              ],
                              letterSpacing: ScreenAdaper.width(5),
                              fontSize: ScreenAdaper.height(70),
                              fontWeight: FontWeight.bold,
                              foreground: Paint()
                                ..style = PaintingStyle.stroke
                                ..strokeWidth = 1
                                ..color = Colors.black),
                        ),
                        Text(
                          '山矿通',
                          style: TextStyle(
                              fontWeight: FontWeight.w700,
                              color: AppTheme.nearlyWhite.withOpacity(0.9),
                              letterSpacing: ScreenAdaper.sp(5),
                              fontSize: ScreenAdaper.height(70)),
                        ),
                      ],
                    )
                  ],
                ),
                SizedBox(height: ScreenAdaper.height(50)),
                buildForm(),
                SizedBox(height: ScreenAdaper.height(50)),
                buildSubmitButton(),
                SizedBox(height: ScreenAdaper.height(50)),
              ],
            ),
          ),
        ));
  }

  Widget buildForm() {
    final children = [
      buildUserNameInput(),
      Divider(
        height: 1,
        thickness: ScreenAdaper.height(2),
      ),
      buildPasswordInput(),
    ];

    final child = Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      children: children,
    );

    return Form(
        key: _controller.formKey,
        child: Container(
          padding: EdgeInsets.symmetric(vertical: ScreenAdaper.height(10)),
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: AppTheme.black.withOpacity(0.3),
                spreadRadius: ScreenAdaper.sp(10),
                blurRadius: ScreenAdaper.sp(10),
                offset: Offset(
                    0, ScreenAdaper.height(2)), // changes position of shadow
              ),
            ],
            // border: Border.all(width: 0),
            borderRadius: BorderRadius.circular(ScreenAdaper.sp(30)),
            color: AppTheme.nearlyWhite.withOpacity(0.9),
          ),
          alignment: Alignment.center,
          width: ScreenAdaper.width(formWidth),
          child: child,
        ));
  }

  Widget buildSubmitButton() {
    final button = ElevatedButton(
      style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(ScreenAdaper.sp(30))),
          padding: EdgeInsets.symmetric(
              horizontal: ScreenAdaper.height(25),
              vertical: ScreenAdaper.height(20)),
          foregroundColor: AppTheme.nearlyWhite,
          textStyle: TextStyle(
              letterSpacing: 5,
              fontWeight: FontWeight.bold,
              fontSize: ScreenAdaper.height(25)),
          backgroundColor: AppTheme.primaryColor),
      onPressed: _controller.doLogin,
      child: const Text('登录'),
    );
    final child = Expanded(
      child: button,
    );
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(ScreenAdaper.sp(30)),
        boxShadow: [
          BoxShadow(
            color: AppTheme.black.withOpacity(0.3),
            spreadRadius: ScreenAdaper.sp(10),
            blurRadius: ScreenAdaper.sp(10),
            offset:
                Offset(0, ScreenAdaper.height(5)), // changes position of shadow
          ),
        ],
      ),
      alignment: Alignment.center,
      width: ScreenAdaper.width(formWidth),
      child: Row(
        children: [child],
      ),
    );
  }

  Widget buildUserNameInput() {
    return TextFormField(
      // 纯英文数字键盘
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
          prefixIcon: Icon(
            Icons.person_2_outlined,
            size: ScreenAdaper.height(45),
          ),
          hintText: '用户名',
          hintStyle: TextStyle(fontSize: ScreenAdaper.height(25)),
          border: InputBorder.none,
          focusedBorder: InputBorder.none),
      onFieldSubmitted: (value) {
        _controller.passwordFocusNode.requestFocus();
      },
      style: TextStyle(fontSize: ScreenAdaper.height(30)),
      onChanged: (value) {
        _controller.username = value;
      },
    );
  }

  Widget buildPasswordInput() {
    return Obx(() => TextFormField(
          decoration: InputDecoration(
              prefixIcon: Icon(
                Icons.lock_outlined,
                size: ScreenAdaper.height(45),
              ),
              suffixIcon: GestureDetector(
                onTap: () {
                  _controller.obscureText.value =
                      !_controller.obscureText.value;
                },
                child: Icon(
                  !_controller.obscureText.value
                      ? Icons.visibility
                      : Icons.visibility_off,
                  size: ScreenAdaper.height(45),
                ),
              ),
              errorStyle: TextStyle(fontSize: ScreenAdaper.height(20)),
              hintText: '密码',
              border: InputBorder.none,
              focusedBorder: InputBorder.none),
          obscureText: _controller.obscureText.value,
          focusNode: _controller.passwordFocusNode,
          onFieldSubmitted: (value) {
            _controller.doLogin();
          },
          style: TextStyle(fontSize: ScreenAdaper.height(30)),
          onChanged: (value) {
            _controller.password = value;
          },
        ));
  }

  Widget buildForgotPassword() {
    return GestureDetector(
      onTap: () {},
      child: Container(
          alignment: Alignment.centerRight,
          child: Text(
            '忘记密码?',
            style: TextStyle(
              color: Colors.grey,
              fontSize: ScreenAdaper.height(20),
              decoration: TextDecoration.underline,
            ),
          )),
    );
  }
}