import 'package:flutter/material.dart';
import 'package:flutter/services.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/auth/view/otp_view.dart';
import 'package:syncrow_app/features/shared_widgets/default_button.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.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/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 CheckEmailPage extends StatelessWidget {
  final bool? forget;
  const CheckEmailPage({super.key, this.forget});
  @override
  Widget build(BuildContext context) {
    final formKey = AuthCubit.get(context).checkEmailFormKey;

    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarBrightness: Brightness.light, statusBarIconBrightness: Brightness.light));
    return BlocConsumer<AuthCubit, AuthState>(
      listener: (context, state) {
        if (state is AuthError) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text(state.message),
            ),
          );
        } else if (state is AuthSignUpSuccess) {
          Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => OtpView(
                  isForgetPage: forget!,
                ),
              ));
        }
      },
      builder: (context, state) {
        return Scaffold(
          body: Stack(
            children: [
              Container(
                width: MediaQuery.sizeOf(context).width,
                height: MediaQuery.sizeOf(context).height,
                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: Form(
                      key: formKey,
                      child: SingleChildScrollView(
                        child: Center(
                          child: Column(
                            children: [
                              Center(
                                child: SvgPicture.asset(
                                  Assets.assetsImagesLogo,
                                  width: 160,
                                ),
                              ),
                              Center(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      height: MediaQuery.sizeOf(context).height / 5.5,
                                    ),
                                    TitleMedium(
                                      text: 'Forgot password?',
                                      style: context.titleMedium.copyWith(
                                        fontWeight: FontsManager.extraBold,
                                        color: Colors.white,
                                      ),
                                    ),
                                    const SizedBox(
                                      height: 20,
                                    ),
                                    const BodyMedium(
                                      text: "Enter email address",
                                      fontColor: Colors.white,
                                    ),
                                    TextFormField(
                                      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: 20,
                                    ),
                                    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(
                                              'Send Code',
                                            ),
                                            onPressed: () {
                                              AuthCubit.get(context).showValidationMessage = true;
                                              if (formKey.currentState!.validate()) {
                                                if ((state is! AuthLoading)) {
                                                  AuthCubit.get(context).sendOtp(isforget: forget);
                                                  FocusScope.of(context).unfocus();
                                                }
                                              }
                                            },
                                          ),
                                        ),
                                      ],
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(
                                          top: MediaQuery.sizeOf(context).height / 5.5),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: <Widget>[
                                          BodyLarge(
                                            text: "Do you have an account? ",
                                            style:
                                                context.displaySmall.copyWith(color: Colors.white),
                                          ),
                                          TextButton(
                                            onPressed: () {
                                              Navigator.of(context).pop();
                                            },
                                            child: BodyLarge(
                                              text: "Sign in",
                                              style: context.displaySmall.copyWith(
                                                color: Colors.black,
                                                fontWeight: FontsManager.bold,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    )),
              )
            ],
          ),
        );
      },
    );
  }
}
