import 'package:auth/auth.dart';
import 'package:auth/src/features/device_sign_up/add_kid_screen.dart';
import 'package:auth/src/features/device_sign_up/link_watch/link_watch_screen.dart';
import 'package:auth/src/features/device_sign_up/link_watch/link_watch_previous_screen.dart';
import 'package:auth/src/features/sign_up/presentation/account_created_screen.dart';
import 'package:auth/src/widgets/layouts/form_step_layout.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';

class DeviceSignupScreen extends ConsumerStatefulWidget {
  final NavigationContract navigationContract;

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

  @override
  ConsumerState<DeviceSignupScreen> createState() =>
      DeviceSignupScreenState(navigationContract);
}

class DeviceSignupScreenState extends ConsumerState<DeviceSignupScreen> {
  late int currentStep;
  final NavigationContract navigationContract;

  DeviceSignupScreenState(this.navigationContract);

  @override
  void initState() {
    currentStep = 0;
  }

  @override
  Widget build(BuildContext context) {
    return getSteps()[currentStep];
  }

  List<Widget> getSteps() {
    final theme = ref.watch(themePortProvider);

    final continueBtn = Container(
      color: theme.getColorFor(ThemeCode.backgroundPrimary),
      child: PrimaryButton(
        onPressed: () => {
          setState(() {
            currentStep++;
          }),
        },
        text: "Continuar",
        color: theme.getColorFor(ThemeCode.buttonPrimary),
      ),
    );

    return [
      AddKidScreen(
        nextStep: () => {
          setState(() {
            currentStep++;
          }),
        },
      ),
      FormStepLayout(
        title: "Crea su perfil",
        subtitle:
            "Necesitamos estos datos para crear su cuenta y gestionar sus pagos y gastos",
        currentStep: 1,
        numSteps: 3,
        body: [CreateProfileScreen()],
        footer: [
          Container(
            padding: EdgeInsets.all(24),
            color: theme.getColorFor(ThemeCode.backgroundPrimary),
            child: continueBtn,
          ),
        ],
        nextStep: () => {},
        previousStep: () => {},
      ),
      FormStepLayout(
        title: "Vincula su correa y su reloj",
        currentStep: 2,
        numSteps: 3,
        body: [LinkWatchPreviousScreen()],
        footer: [continueBtn],
        nextStep: () => {},
        previousStep: () => {},
      ),
      FormStepLayout(
        title: "Vincula su correa\ny su reloj",
        currentStep: 2,
        numSteps: 3,
        body: [LinkWatchScreen(step: 1)],
        footer: [continueBtn],
        nextStep: () => {},
        previousStep: () => {},
      ),
      FormStepLayout(
        title: "Vincula su correa\ny su reloj",
        currentStep: 2,
        numSteps: 3,
        body: [LinkWatchScreen(step: 2)],
        footer: [continueBtn],
        nextStep: () => {},
        previousStep: () => {},
      ),
      AccountCreatedScreen(navigationContract: navigationContract),
    ];
  }
}
