import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:helpers/helpers/misc_build/build_media.dart';
import 'package:rluv/features/account/signup.dart';
import 'package:rluv/global/styles.dart';

import '../../global/api.dart';
import '../../global/widgets/ui_button.dart';
import '../../main.dart';
import 'login.dart';

class AccountCreateScreen extends ConsumerStatefulWidget {
  const AccountCreateScreen({super.key});

  @override
  ConsumerState<AccountCreateScreen> createState() =>
      _AccountCreateScreenState();
}

enum _AccountScreen { options, login, signup }

class _AccountCreateScreenState extends ConsumerState<AccountCreateScreen> {
  _AccountScreen currentScreen = _AccountScreen.options;
  static final signupFormKey = GlobalKey<FormState>();
  static final loginFormKey = GlobalKey<FormState>();

  bool usingUsername = true;
  bool hasFamilyCode = false;

  @override
  Widget build(BuildContext context) {
    if (ref.watch(tokenProvider) != null) {
      WidgetsBinding.instance.addPostFrameCallback(
        (_) {
          Navigator.pushAndRemoveUntil(
            context,
            MaterialPageRoute(builder: (ctx) => const Home()),
            (r) => false,
          );
        },
      );
    }
    final screen = BuildMedia(context).size;
    return Scaffold(
      backgroundColor: Styles.purpleNurple,
      body: SafeArea(
        child: AnimatedSwitcher(
          duration: const Duration(milliseconds: 300),
          child: currentScreen == _AccountScreen.options
              ? Center(
                  child: SizedBox(
                    width: screen.width * 0.5 > 400 ? 400 : screen.width * 0.5,
                    child: Column(
                      children: [
                        const Spacer(),
                        const Text(
                          'Welcome!',
                          style: TextStyle(fontSize: 28),
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 40.0),
                          child: Image.asset("assets/app_icon.png",
                              height:
                                  screen.width > 500 ? 250 : screen.width * 0.5,
                              width: screen.width > 500
                                  ? 250
                                  : screen.width * 0.5),
                        ),
                        UiButton(
                          color: Styles.sunflower,
                          onPressed: () {
                            setState(
                              () => currentScreen = _AccountScreen.signup,
                            );
                          },
                          text: 'Signup',
                        ),
                        const SizedBox(height: 20),
                        UiButton(
                          color: Styles.flounderBlue,
                          onPressed: () {
                            setState(
                              () => currentScreen = _AccountScreen.login,
                            );
                          },
                          text: 'Login',
                        ),
                        const Spacer(),
                      ],
                    ),
                  ),
                )
              : currentScreen == _AccountScreen.login
                  ? Login(formKey: loginFormKey, exitNav: exitNav())
                  : Signup(
                      formKey: signupFormKey,
                      exitNav: exitNav(),
                    ),
        ),
      ),
    );
  }

  Widget exitNav() => Align(
        alignment: Alignment.topLeft,
        child: IconButton(
          icon: const Icon(Icons.chevron_left),
          onPressed: () {
            setState(
              () => currentScreen = _AccountScreen.options,
            );
          },
        ),
      );
}