import 'package:awesome_login_page/models/config.dart';
import 'package:awesome_login_page/views/login_card.dart';
import 'package:awesome_login_page/views/my_header.dart';
import 'package:awesome_login_page/views/social_icon.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

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

class _LoginPageState extends State<LoginPage> {
  final ScrollController _scrollController = ScrollController();
  double offset = 0;
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context,
        designSize: const Size(750, 1334), scaleByHeight: true);

    return Scaffold(
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            MyHeader(
              image: "assets/icons/barbecue.svg",
              textTop: "Order and",
              textBottom: "Get to door steps",
              offset: offset,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CardLogin(),
                    SizedBox(
                      height: 20.h,
                    ),
                    Row(
                      children: [
                        SizedBox(
                          width: 12.w,
                        ),
                        GestureDetector(
                          onTap: _radio,
                          child: buildRadioButton(_isSelected),
                        ),
                        const SizedBox(
                          width: 8,
                        ),
                        Text(
                          "Remmeber me",
                          style: TextStyle(fontSize: 12.sp),
                        ),
                      ],
                    ),
                    InkWell(
                      child: Material(
                        color: Colors.transparent,
                        child: InkWell(
                            onTap: () {},
                            child: const Center(
                              child: Text(
                                "SIGNIN",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 18,
                                    letterSpacing: 1),
                              ),
                            )),
                      ),
                    ),
                    SizedBox(
                      height: 40.h,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        buildHorizontalLine(),
                        Text(
                          "Social Login",
                          style: TextStyle(fontSize: 16.sp),
                        ),
                        buildHorizontalLine(),
                      ],
                    ),
                    const SizedBox(
                      height: 40,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        SocialIcon(
                          color: Config.kFaceBookColor,
                          icon: CustomIcons.facebook,
                          press: () {
                            facebookLoign();
                          },
                        ),
                        SocialIcon(
                            color: Config.kGoogleColor,
                            icon: CustomIcons.googlePlus,
                            press: () {
                              googleLogin();
                            })
                      ],
                    ),
                    SizedBox(
                      height: 30.h,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text(
                          "New User? ",
                          style: TextStyle(fontSize: 18),
                        ),
                        InkWell(
                          onTap: () {
                            signup();
                          },
                          child: const Text(
                            "SignUp",
                            style: TextStyle(color: Color(0xFF5d74e3)),
                          ),
                        )
                      ],
                    )
                  ]),
            ),
          ],
        ),
      ),
    );
  }

  /// 选中和取消选中
  void _radio() {
    setState(() {
      _isSelected = !_isSelected;
    });
  }

  /// 自定义选中按钮
  /// isSelected 是否选中
  Widget buildRadioButton(bool isSelected) {
    return Container(
        height: 16,
        width: 16,
        padding: const EdgeInsets.all(2),
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(width: 2, color: Colors.blue)),
        child: isSelected
            ? Container(
                width: double.infinity,
                height: double.infinity,
                decoration:
                    const BoxDecoration(shape: BoxShape.circle, color: Colors.blue))
            : Container());
  }

  /// 自定义横线
  Widget buildHorizontalLine() {
    return Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        child: Container(
          width: 120.w,
          height: 1.0,
          color: Colors.black26.withOpacity(.2),
        ));
  }

  /// register
  void signup() {}

  /// facebook login
  void facebookLoign() {}

  /// google login
  void googleLogin() {}
}