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 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,
            ),
            const SizedBox(height: 20),
            PasswordTextFieldWidget(
              passwordController: loginViewModel.passwordController,
              obscurePassword: loginViewModel.obscurePassword,
              highlightPasswordField: loginViewModel.highlightPasswordField,
              onTogglePasswordVisibility:
                  loginViewModel.togglePasswordVisibility,
            ),
            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),
          ],
        );
      },
    );
  }
}