import 'package:flutter/material.dart';

import 'package:go_router/go_router.dart';

import 'package:sxchnge_theme/sxchnge_theme.dart';

import 'brand_panel.dart';
import 'form.dart';

import '../generated/i18n/app_localizations.dart';

class AuthPage extends StatefulWidget {
  const AuthPage({super.key, this.email});
  final String? email;

  @override
  State<AuthPage> createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  // Preserve the form when moving between the desktop and mobile layouts.
  final _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) => Scaffold(
    body: SafeArea(
      child: LayoutBuilder(
        builder: (context, constraints) {
          final wide = constraints.maxWidth >= 1000;
          final form = SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: constraints.maxHeight),
              child: Center(
                child: Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: wide ? 56 : 24,
                    vertical: wide ? 48 : 24,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Align(
                        alignment: Alignment.centerRight,
                        child: TextButton(
                          onPressed: () => context.push('/settings'),
                          child: Text(AppLocalizations.of(context)!.wSettings),
                        ),
                      ),
                      const SizedBox(height: 16),
                      if (!wide) ...[
                        const Align(
                          alignment: Alignment.centerLeft,
                          child: BrandWordmark(),
                        ),
                        const SizedBox(height: 48),
                      ],
                      Center(
                        child: ConstrainedBox(
                          constraints: const BoxConstraints(maxWidth: 440),
                          child: AuthForm(key: _formKey, email: widget.email),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
          if (!wide) return form;
          return Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                flex: 47,
                child: Theme(
                  data: SxchngeTheme.dark(),
                  child: SingleChildScrollView(
                    child: ConstrainedBox(
                      constraints: BoxConstraints(
                        minHeight: constraints.maxHeight,
                      ),
                      child: const BrandPanel(),
                    ),
                  ),
                ),
              ),
              Expanded(flex: 53, child: form),
            ],
          );
        },
      ),
    ),
  );
}