import 'package:em2rp/view_model/login_view_model.dart';
import 'package:em2rp/views/widgets/auth/mail_textfield.dart';
import 'package:em2rp/views/widgets/error_message.dart';
import 'package:em2rp/views/widgets/auth/forgot_password_button.dart';
import 'package:em2rp/views/widgets/image/big_image_left.dart';
import 'package:em2rp/views/widgets/auth/login_button.dart';
import 'package:em2rp/views/widgets/image/em2_logo_n_sur_b.dart';
import 'package:em2rp/views/widgets/auth/password_textfield.dart';
import 'package:em2rp/views/widgets/auth/welcome_text.dart';
import 'package:em2rp/views/widgets/auth/forgot_password_dialog.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => LoginViewModel(),
      child: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) {
            return constraints.maxWidth > 900
                ? _buildLargeScreenLayout(context)
                : _buildSmallScreenLayout(context);
          },
        ),
      ),
    );
  }

  Widget _buildLargeScreenLayout(BuildContext context) {
    return Row(
      children: <Widget>[
        const Expanded(flex: 6, child: BigLeftImageWidget()),
        Expanded(
          flex: 4,
          child: Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 50.0, vertical: 30.0),
            child: _buildLoginForm(context),
          ),
        ),
      ],
    );
  }

  Widget _buildSmallScreenLayout(BuildContext context) {
    return Center(
      child: SingleChildScrollView(
        padding: const EdgeInsets.all(20.0),
        child: _buildLoginForm(context),
      ),
    );
  }

  Widget _buildLoginForm(BuildContext context) {
    return Consumer<LoginViewModel>(
      builder: (context, loginViewModel, child) {
        return AutofillGroup(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              const LogoWidget(),
              const SizedBox(height: 30),
              const WelcomeTextWidget(),
              const SizedBox(height: 40),
              EmailTextFieldWidget(
                emailController: loginViewModel.emailController,
                highlightEmailField: loginViewModel.highlightEmailField,
                onSubmitted: () => loginViewModel.signIn(context),
              ),
              const SizedBox(height: 20),
              PasswordTextFieldWidget(
                passwordController: loginViewModel.passwordController,
                obscurePassword: loginViewModel.obscurePassword,
                highlightPasswordField: loginViewModel.highlightPasswordField,
                onTogglePasswordVisibility:
                    loginViewModel.togglePasswordVisibility,
                onSubmitted: () => loginViewModel.signIn(context),
              ),
              ForgotPasswordButtonWidget(
                onPressed: () => showDialog(
                  context: context,
                  builder: (BuildContext context) =>
                      const ForgotPasswordDialogWidget(),
                ),
              ),
              const SizedBox(height: 30),
              LoginButtonWidget(
                isLoading: loginViewModel.isLoading,
                onPressed: () => loginViewModel.signIn(context),
              ),
              const SizedBox(height: 20),
              ErrorMessageWidget(errorMessage: loginViewModel.errorMessage),
            ],
          ),
        );
      },
    );
  }
}
