import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import '../../app/constant.dart';
import '../../widget/sas_textfield.dart';

class ProblemLoginScreen extends HookConsumerWidget {
  const ProblemLoginScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final ctrlEmail = useTextEditingController(text: "");
    final ctrlNote = useTextEditingController(text: "");
    final focusNodeEmail = useFocusNode();
    final focusNodeNote = useFocusNode();

    final emailhasFocus = useState(false);
    final notehasFocus = useState(false);

    focusNodeEmail.addListener(() {
      if (focusNodeEmail.hasFocus) {
        emailhasFocus.value = true;
        notehasFocus.value = false;
      } else {
        emailhasFocus.value = false;
      }
    });

    focusNodeNote.addListener(() {
      if (focusNodeNote.hasFocus) {
        emailhasFocus.value = false;
        notehasFocus.value = true;
      } else {
        notehasFocus.value = false;
      }
    });
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        backgroundColor: Constant.backgroundWhite,
        body: SizedBox(
          width: Constant.getActualX(context: context, x: 390),
          height: Constant.getActualY(context: context, y: 844),
          child: ListView(
            children: [
              // bg login
              Padding(
                padding: EdgeInsets.only(
                  top: Constant.getActualY(context: context, y: 70),
                  left: Constant.getActualX(context: context, x: 16),
                  right: Constant.getActualX(context: context, x: 16),
                ),
                child: Image.asset(
                  "assets/bg_problem_login.png",
                  // fit: BoxFit.fill,
                  // scale: 1,
                ),
              ),
              SizedBox(
                height: Constant.getActualY(context: context, y: 27),
              ),
              Padding(
                padding: EdgeInsets.only(
                  top: Constant.getActualY(context: context, y: 27),
                  left: Constant.getActualX(context: context, x: 38),
                  right: Constant.getActualX(context: context, x: 32),
                ),
                child: SizedBox(
                  width: Constant.getActualX(context: context, x: 320),
                  height: Constant.getActualY(context: context, y: 360),
                  // color: Colors.amber,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Problem Login",
                        style: Constant.heading2(context: context).copyWith(
                            color: Constant.textPrimary,
                            fontWeight: FontWeight.w600),
                      ),
                      SizedBox(
                        height: Constant.getActualY(context: context, y: 32),
                      ),
                      // CustomTextFieldLogin(
                      //   onChange: (String x) {
                      //     // print(x);
                      //   },
                      //   isPassword: false,
                      //   hintText: "Email",
                      //   labelText: "Email",
                      //   isError: false,
                      //   ctrl: ctrlEmail,
                      //   focusNode: focusNodeEmail,
                      //   hasFocus: emailhasFocus.value,
                      // ),
                      SasTextField(
                        hintText: "Email",
                        labelText: "Email",
                        controller: ctrlEmail,
                        focusNode: focusNodeEmail,
                        hasFocus: emailhasFocus.value,
                      ),
                      SizedBox(
                        height: Constant.getActualY(context: context, y: 16),
                      ),
                      // CustomTextFieldLogin(
                      //   onChange: (String x) {
                      //     // print(x);
                      //   },
                      //   isPassword: false,
                      //   hintText: "Error",
                      //   labelText: "Note",
                      //   isError: false,
                      //   ctrl: ctrlNote,
                      //   focusNode: focusNodeNote,
                      //   hasFocus: notehasFocus.value,
                      // ),
                      SasTextField(
                        hintText: "Error",
                        labelText: "Error",
                        controller: ctrlNote,
                        focusNode: focusNodeNote,
                        hasFocus: notehasFocus.value,
                      ),
                      SizedBox(
                        height: Constant.getActualY(context: context, y: 20),
                      ),
                      // button login
                      SizedBox(
                        width: Constant.getActualX(context: context, x: 320),
                        height: Constant.getActualY(context: context, y: 48),
                        child: ElevatedButton(
                          onPressed: () {},
                          style: ButtonStyle(
                            backgroundColor: MaterialStateColor.resolveWith(
                                (st) => Constant.primaryMain),
                            shape: MaterialStateProperty.all<
                                RoundedRectangleBorder>(
                              RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(8),
                                // side: BorderSide(color: Colors.red),
                              ),
                            ),
                            shadowColor:
                                MaterialStateProperty.all(const Color(0xffff48423d)),
                            elevation: MaterialStateProperty.all(4.0),
                          ),
                          child: Align(
                            alignment: Alignment.center,
                            child: Text(
                              'Send',
                              style: Constant.buttonLarge(context: context)
                                  .copyWith(
                                color: Constant.backgroundWhite,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
