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/menu/bloc/privacy_policy.dart';
import 'package:syncrow_app/features/menu/bloc/user_agreement.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/color_manager.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")
                                        .copyWith(
                                      errorMaxLines: 2,
                                    ),
                                  ),
                                  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")
                                        .copyWith(
                                      errorMaxLines: 8,
                                    ),
                                  ),
                                  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),
                                  Center(
                                    child: Padding(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 16.0),
                                      child: Text.rich(
                                        TextSpan(
                                          text:
                                              'By signing up you agree to our ',
                                          style: Theme.of(context)
                                              .textTheme
                                              .bodyMedium!
                                              .copyWith(
                                                fontSize: 16,
                                                color: ColorsManager
                                                    .onPrimaryColor,
                                              ),
                                          children: [
                                            WidgetSpan(
                                              child: GestureDetector(
                                                onTap: () {
                                                  Navigator.of(context)
                                                      .push(MaterialPageRoute(
                                                    builder: (context) =>
                                                        const UserAgreement(),
                                                  ));
                                                },
                                                child: BodyMedium(
                                                  text: 'Terms & Conditions',
                                                  style: Theme.of(context)
                                                      .textTheme
                                                      .bodyMedium
                                                      ?.copyWith(
                                                          decoration:
                                                              TextDecoration
                                                                  .underline,
                                                          decorationColor:
                                                              ColorsManager
                                                                  .onPrimaryColor,
                                                          color: ColorsManager
                                                              .onPrimaryColor,
                                                          fontSize: 16),
                                                ),
                                              ),
                                            ),
                                            TextSpan(
                                                text: ' and ',
                                                style: Theme.of(context)
                                                    .textTheme
                                                    .bodyMedium!
                                                    .copyWith(
                                                      fontSize: 16,
                                                      color: ColorsManager
                                                          .onPrimaryColor,
                                                    )),
                                            WidgetSpan(
                                              child: GestureDetector(
                                                onTap: () {
                                                  Navigator.of(context)
                                                      .push(MaterialPageRoute(
                                                    builder: (context) =>
                                                        const PrivacyPolicy(),
                                                  ));
                                                },
                                                child: BodyMedium(
                                                  text: 'Privacy Policy',
                                                  style: Theme.of(context)
                                                      .textTheme
                                                      .bodySmall
                                                      ?.copyWith(
                                                          decoration:
                                                              TextDecoration
                                                                  .underline,
                                                          decorationColor:
                                                              Colors.white,
                                                          color: ColorsManager
                                                              .onPrimaryColor,
                                                          fontSize: 16),
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                        textAlign: TextAlign.center,
                                      ),
                                    ),
                                  ),
                                  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();
                                              }
                                            }
                                          },
                                        ),
                                      ),
                                    ],
                                  )
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        );
      },
    );
  }
}
