import 'package:flutter/material.dart';
import 'package:fun_selfie_app/utils/storage.dart';
import 'dart:convert';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  bool showPassword = false;
  GlobalKey<FormState> formKey = GlobalKey<FormState>(); //表单验证
  final TextEditingController configName = TextEditingController();
  final TextEditingController configPass = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: const Text("登录"),
      ),
      body: Container(
        width: screenSize.width,
        height: screenSize.height,
        decoration: const BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage('static/images/login_bg.png'))),
        child: Center(
            child: Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                ),
                width: 500,
                height: 400,
                child: Form(
                    key: formKey,
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 50, right: 50, top: 70, bottom: 0),
                      // padding: const EdgeInsets.all(50),
                      child: Column(
                        children: [
                          // const SizedBox(
                          //   height: 24,
                          // ),
                          Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 20, vertical: 5),
                            decoration: const BoxDecoration(
                                color: Color.fromARGB(8, 0, 0, 0),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(10))),
                            child: TextFormField(
                              controller: configName,
                              validator: (v) => (v == '') ? "请输入账号" : null,
                              decoration: const InputDecoration(
                                border: InputBorder.none,
                                labelText: "账号",
                                hintText: "请输入账号",
                                prefixIcon: Icon(Icons.person),
                              ),
                            ),
                          ),
                          const SizedBox(
                            height: 16,
                          ),
                          Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 20, vertical: 5),
                            decoration: const BoxDecoration(
                                color: Color.fromARGB(8, 0, 0, 0),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(10))),
                            child: TextFormField(
                              controller: configPass,
                              validator: (v) => (v == '') ? "请输入密码" : null,
                              obscureText: !showPassword,
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                labelText: "密码",
                                hintText: "请输入密码",
                                prefixIcon: const Icon(Icons.lock),
                                suffixIcon: IconButton(
                                  icon: Icon(showPassword
                                      ? Icons.visibility_off
                                      : Icons.visibility),
                                  onPressed: () {
                                    setState(() {
                                      showPassword = !showPassword;
                                    });
                                  },
                                ),
                              ),
                            ),
                          ),
                          // const SizedBox(
                          //   height: 16,
                          // ),
                          // GestureDetector(
                          //   child: const SizedBox(
                          //     width: double.infinity,
                          //     child: Text(
                          //       "找回密码",
                          //       style: TextStyle(color: Colors.blue),
                          //       textAlign: TextAlign.right,
                          //     ),
                          //   ),
                          //   onTap: () {
                          //     debugPrint("找回密码被点击");
                          //   },
                          // ),
                          const SizedBox(
                            height: 50,
                          ),
                          SizedBox(
                            width: double.infinity,
                            height: 40,
                            child: ElevatedButton(
                              style: ButtonStyle(
                                // backgroundColor:
                                //     MaterialStateProperty.all(Colors.white),
                                shadowColor: MaterialStateProperty.all(
                                    Colors.transparent),
                                // foregroundColor: MaterialStateProperty.all(
                                //     const Color(0xffBB86FC)),
                              ),
                              child: const Text("登录"),
                              onPressed: () {
                                _onSubmit(context);
                              },
                            ),
                          ),
                          const SizedBox(
                            height: 16,
                          ),
                          // SizedBox(
                          //   width: double.infinity,
                          //   child: ElevatedButton(
                          //     child: const Text("注册"),
                          //     onPressed: () {
                          //       Navigator.pushReplacementNamed(context, 'register');
                          //     },
                          //   ),
                          // ),
                        ],
                      ),
                    )))),
      ),
    );
  }

  void _onSubmit(context) async {
    final form = formKey.currentState;
    if (form!.validate()) {
      Object str = {
        'configName': configName.text,
        'configPass': configPass.text
      };
      await StorageUtil.setString('userMsg', jsonEncode(str));
      Navigator.pushNamed(context, "/");
    }
  }
}