import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_app/features/auth/bloc/auth_cubit.dart';
import 'package:syncrow_app/features/shared_widgets/default_button.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/title_medium.dart';
import 'package:syncrow_app/generated/assets.dart';
import 'package:syncrow_app/navigation/routing_constants.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/resource_manager/constants.dart';
import 'package:syncrow_app/utils/resource_manager/font_manager.dart';
import 'package:syncrow_app/utils/resource_manager/styles_manager.dart';

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

  @override
  Widget build(BuildContext context) {
    final formKey = AuthCubit.get(context).signUpFormKey;
    return BlocConsumer<AuthCubit, AuthState>(
      listener: (context, state) {
        if (state is AuthSignUpSuccess) {
          Navigator.pushNamed(context, Routes.otpRoute);
          // Navigator.popAndPushNamed(context, Routes.otpRoute);
        }
      },
      builder: (context, state) {
        return Scaffold(
          body: Stack(
            children: [
              Container(
                width: MediaQuery.sizeOf(context).width,
                height: MediaQuery.sizeOf(context).height,
                padding: const EdgeInsets.symmetric(vertical: 24),
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                      Assets.assetsImagesBackground,
                    ),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Container(
                width: MediaQuery.sizeOf(context).width,
                height: MediaQuery.sizeOf(context).height,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(Assets.assetsImagesVector),
                    fit: BoxFit.cover,
                    opacity: 0.9,
                  ),
                ),
              ),
              SafeArea(
                child: Padding(
                  padding: const EdgeInsets.only(
                    right: Constants.defaultPadding,
                    left: Constants.defaultPadding,
                    top: Constants.defaultPadding,
                  ),
                  child: SingleChildScrollView(
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Center(
                            child: SvgPicture.asset(
                              Assets.assetsImagesLogo,
                              width: 160,
                            ),
                          ),
                          const SizedBox(
                            height: 40,
                          ),
                          TitleMedium(
                            text: 'Create new account',
                            style: context.titleMedium.copyWith(
                              fontWeight: FontsManager.extraBold,
                              color: Colors.white,
                            ),
                          ),
                          const SizedBox(
                            height: 20,
                          ),
                          Form(
                            key: formKey,
                            // autovalidateMode: AutovalidateMode.disabled,
                            child: SingleChildScrollView(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  const BodyMedium(
                                    text: "Full Name",
                                    fontColor: Colors.white,
                                  ),
                                  TextFormField(
                                    // autovalidateMode: AutovalidateMode.disabled,
                                    textInputAction: TextInputAction.done,
                                    keyboardType: TextInputType.name,
                                    scrollPadding: EdgeInsets.zero,
                                    autocorrect: false,
                                    autofillHints: const [AutofillHints.name],
                                    // controller: AuthCubit.get(context).fullNameController,
                                    validator: (value) =>
                                        AuthCubit.get(context).fullNameValidator(value),
                                    onTapOutside: (event) {
                                      FocusScope.of(context).unfocus();
                                    },
                                    onChanged: (value) {
                                      AuthCubit.get(context).fullName = value;
                                    },
                                    onTap: () {},
                                    decoration: defaultInputDecoration(context, hint: "Full Name"),
                                  ),
                                  const SizedBox(height: 16),
                                  const BodyMedium(
                                    text: "Email",
                                    fontColor: Colors.white,
                                  ),
                                  TextFormField(
                                    // autovalidateMode: AutovalidateMode.disabled,
                                    textInputAction: TextInputAction.done,
                                    keyboardType: TextInputType.text,
                                    scrollPadding: EdgeInsets.zero,
                                    autocorrect: false,
                                    enableSuggestions: false,
                                    autofillHints: const [AutofillHints.email],
                                    validator: AuthCubit.get(context).emailAddressValidator,
                                    onTapOutside: (event) {
                                      FocusScope.of(context).unfocus();
                                    },
                                    onChanged: (value) {
                                      AuthCubit.get(context).email = value;
                                    },
                                    decoration:
                                        defaultInputDecoration(context, hint: "Example@email.com"),
                                  ),
                                  const SizedBox(height: 16),
                                  const BodyMedium(
                                    text: "Password",
                                    fontColor: Colors.white,
                                  ),
                                  TextFormField(
                                    // autovalidateMode: AutovalidateMode.disabled,
                                    textInputAction: TextInputAction.done,
                                    keyboardType: TextInputType.text,
                                    scrollPadding: EdgeInsets.zero,
                                    autocorrect: false,
                                    autofillHints: const [AutofillHints.password],
                                    validator: AuthCubit.get(context).passwordValidator,
                                    onChanged: (value) {
                                      AuthCubit.get(context).signUpPassword = value;
                                    },
                                    onTapOutside: (event) {
                                      FocusScope.of(context).unfocus();
                                    },
                                    obscureText: !AuthCubit.get(context).isPasswordVisible,
                                    decoration: defaultInputDecoration(context,
                                        hint: "At least 8 characters"),
                                  ),
                                  const SizedBox(height: 16),
                                  const BodyMedium(
                                    text: "Re-enter Password",
                                    fontColor: Colors.white,
                                  ),
                                  TextFormField(
                                    autovalidateMode: AutovalidateMode.disabled,
                                    textInputAction: TextInputAction.done,
                                    keyboardType: TextInputType.text,
                                    scrollPadding: EdgeInsets.zero,
                                    autocorrect: false,
                                    enableSuggestions: false,
                                    autofillHints: const [AutofillHints.password],
                                    onChanged: (value) {},
                                    validator: AuthCubit.get(context).reEnterPasswordCheck,
                                    onTapOutside: (event) {
                                      FocusScope.of(context).unfocus();
                                    },
                                    obscureText: !AuthCubit.get(context).isPasswordVisible,
                                    decoration: defaultInputDecoration(context,
                                        hint: "At least 8 characters"),
                                  ),
                                  const SizedBox(height: 40),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Expanded(
                                        child: DefaultButton(
                                          isDone: state is AuthLoginSuccess,
                                          isLoading: state is AuthLoading,
                                          customButtonStyle: ButtonStyle(
                                            backgroundColor: MaterialStateProperty.all(
                                              Colors.black.withOpacity(.25),
                                            ),
                                            foregroundColor: MaterialStateProperty.all(
                                              Colors.white,
                                            ),
                                          ),
                                          child: const Text(
                                            'Sign up',
                                          ),
                                          onPressed: () {
                                            AuthCubit.get(context).showValidationMessage = true;
                                            if (formKey.currentState!.validate()) {
                                              if ((state is! AuthLoading)) {
                                                AuthCubit.get(context).signUp();
                                                FocusScope.of(context).unfocus();
                                              }
                                            }
                                          },
                                        ),
                                      ),
                                    ],
                                  )
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        );
      },
    );
  }
}