import 'package:flutter/material.dart';
import 'package:flutter_auth/models/config.dart';
import 'package:flutter_auth/pages/background.dart';
import 'package:flutter_auth/pages/login_page.dart';
import 'package:flutter_auth/views/already_have_an_account_check.dart';
import 'package:flutter_auth/views/responsive.dart';
import 'package:flutter_svg/flutter_svg.dart';

/// Description: register page
/// Time       : 08/24/2023 Thursday
/// Author     : liuyuqi.gov@msn.cn
class RegisterPage extends StatefulWidget {
  const RegisterPage({super.key});

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {
    return Background(
        child: SingleChildScrollView(
      child: Responsive(
        desktop: buildRegisterDesktop(),
        mobile: buildRegisterMobile(),
      ),
    ));
  }

  Widget buildRegisterDesktop() {
    return const Row(
      children: [
        Expanded(child: RegisterTop()),
        Expanded(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 450,
              child: RegisterForm(),
            ),
            SizedBox(
              height: defaultPadding / 2,
            ),
            // SocalSigUp()
          ],
        ))
      ],
    );
  }

  Widget buildRegisterMobile() {
    return const Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RegisterTop(),
        Row(
          children: [
            Spacer(),
            Expanded(
              flex: 8,
              child: RegisterForm(),
            ),
            Spacer()
          ],
        )
      ],
    );
  }
}

class RegisterTop extends StatelessWidget {
  const RegisterTop({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text(
          "Register",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        const SizedBox(
          height: defaultPadding,
        ),
        Row(
          children: [
            const Spacer(),
            Expanded(
              flex: 8,
              child: SvgPicture.asset("assets/icons/signup.svg"),
            ),
            const Spacer()
          ],
        ),
        // Text(
        //   "Register with your email and password \nor continue with social media",
        //   textAlign: TextAlign.center,
        // ),
        const SizedBox(
          height: defaultPadding,
        ),
        // SocalSigUp()
      ],
    );
  }
}

class RegisterForm extends StatelessWidget {
  const RegisterForm({super.key});

  @override
  Widget build(BuildContext context) {
    return Form(
        child: Column(
      children: [
        TextFormField(
          keyboardType: TextInputType.emailAddress,
          textInputAction: TextInputAction.next,
          cursorColor: kPrimaryColor,
          onSaved: (value) {},
          decoration: const InputDecoration(
              hintText: "邮箱账户",
              prefixIcon: Padding(
                padding: EdgeInsets.all(defaultPadding),
                child: Icon(Icons.person),
              )),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: defaultPadding),
          child: TextFormField(
            textInputAction: TextInputAction.done,
            obscureText: true,
            cursorColor: kPrimaryColor,
            decoration: const InputDecoration(
                hintText: "密码",
                prefixIcon: Padding(
                  padding: EdgeInsets.all(defaultPadding),
                  child: Icon(Icons.lock),
                )),
          ),
        ),
        const SizedBox(
          height: defaultPadding / 2,
        ),
        ElevatedButton(onPressed: () {}, child: const Text("注册")),
        const SizedBox(
          height: defaultPadding,
        ),
        AlreadyHaveAnAccountCheck(
          press: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return const LoginPage();
            }));
          },
          login: false,
        )
      ],
    ));
  }
}