import 'package:auth/src/login/presentation/loading_google_screen.dart';
import 'package:auth/src/sign_up/signup_screen.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart';

class LoginScreen extends ConsumerStatefulWidget {
  final NavigationContract navigationContract;

  const LoginScreen({super.key, required this.navigationContract});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _LoginScreenState();
}

class _LoginScreenState extends ConsumerState<LoginScreen>{
  bool passwordVisible = false;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themePortProvider);

    bool passwordVisible = true;

    final content = [
      Column(
        spacing: 8,
        children: [
          Icon(Icons.check, color: theme.getColorFor(ThemeCode.buttonPrimary), size: 50),
          Text(
            "¡Te damos la bienvenida!",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ],
      ),
      Column(
        spacing: 32,
        children: [
          Column(
            spacing: 24,
            children: [
              CustomTextField(
                hint: "Nombre de usuario",
                label: "Nombre de usuario",
              ),
              Column(
                spacing: 12,
                children: [
                  CustomTextField(
                      showPassword: passwordVisible,
                      label: "Contraseña",
                      hint: "********"
                  ),
                  Align(
                    alignment: Alignment.topLeft,
                    child: CustomTextButton(
                      text: "¿Has olvidado la contraseña?",
                      onPressed: () =>
                          widget.navigationContract.pushTo('/recover_password'),
                      size: 16,
                  )),
                ],
              )
            ],
          ),
          PrimaryButton(
              onPressed: () => widget.navigationContract.goTo('/main/home'),
              text: "Iniciar sesión",
              color: theme.getColorFor(ThemeCode.buttonPrimary)
          ),
          Container(
            padding: EdgeInsets.only(top: 24),
            child: Column(
              spacing: 24,
              children: [
                Stack(children: [
                  Divider(endIndent: 74, indent: 74),
                  Align(
                      alignment: Alignment.center,
                      child: Container(
                        padding: const EdgeInsets.symmetric(horizontal: 14),
                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
                        child: Text("o continúa con"),
                      )
                  )
                ]),
                Row(
                  spacing: 20,
                  children: [
                    Spacer(),
                    SecondaryButton(
                      onPressed: () => Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (_) => LoadingGoogleScreen(),
                        ),
                      ),
                      radius: 16,
                      padding: 44,
                      text: "Google",
                      label: "Google",
                    ),
                    SecondaryButton(
                      onPressed: ()=>{},
                      radius: 16,
                      padding: 44,
                      icon: Icons.apple,
                      label: "Apple",
                    ),
                    Spacer(),
                  ],
                ),
              ],
            ),
          ),
          Column(
            spacing: 8,
            children: [
              Text(
                  "¿No tienes cuenta?",
                  style: TextStyle(fontSize: 18, letterSpacing: 0)
              ),
              TextButton(
                onPressed: () => widget.navigationContract.goTo(AppRoutes.signup),
                child: Text(
                  "Crear una ahora",
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0)
                )
              ),
            ],
          )
        ],
      ),
    ];

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
      body: Expanded(
        child: Center(
          child: Container(
            margin: EdgeInsets.all(30),
            child: ListView.separated(
              itemBuilder: (BuildContext context, int index) {
                return content[index];
              },
              separatorBuilder: (BuildContext context, int index) {
                return Divider(color: Colors.transparent, height: 48);
              },
              itemCount: content.length,
            ),
          ),
        )
      )
    );
  }
}
