import 'package:auth/src/sign_up/account_created_screen.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:auth/src/sign_up/signup_address_screen.dart';
import 'package:auth/src/sign_up/signup_personal_screen.dart';
import 'package:auth/src/sign_up/signup_user_screen.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

  @override
  ConsumerState<SignupScreen> createState() => _SignupScreenState();
}

class _SignupScreenState extends ConsumerState<SignupScreen> {
  int currentStep = 0;

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

    return Scaffold(
      body: Center(
        child: Container(
          color: theme.getColorFor(ThemeCode.backgroundPrimary),
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            child: Stepper(
              type: StepperType.horizontal,
              currentStep: currentStep,
              steps: getSteps(),
              controlsBuilder:
                  (BuildContext context, ControlsDetails controls) {
                    final canGoBack = currentStep > 0;

                    return Row(
                      children: <Widget>[
                        Expanded(
                          child: OutlinedButton(
                            onPressed: canGoBack ? controls.onStepCancel : null,
                            child: const Text('Atrás'),
                          ),
                        ),
                        Expanded(
                          child: FilledButton(
                            style: ButtonStyle(
                              backgroundColor: WidgetStatePropertyAll<Color>(
                                theme.getColorFor(ThemeCode.buttonSecondary),
                              ),
                            ),
                            onPressed: controls.onStepContinue,
                            child: const Text('Siguiente'),
                          ),
                        ),
                      ],
                    );
                  },
              onStepCancel: () {
                if (currentStep > 0) {
                  setState(() {
                    currentStep -= 1;
                  });
                }
              },
              onStepContinue: () {
                final isLastStep = currentStep == getSteps().length - 1;

                if (isLastStep) {
                  Navigator.pushReplacement(
                    context,
                    MaterialPageRoute(
                      builder: (_) => const AccountCreatedScreen(),
                    ),
                  );
                } else {
                  setState(() {
                    currentStep += 1;
                  });
                }
              },
            ),
          ),
        ),
      ),
    );
  }

  List<Step> getSteps() {
    return <Step>[
      Step(
        state: currentStep > 0 ? StepState.complete : StepState.indexed,
        isActive: currentStep >= 0,
        stepStyle: currentStep >= 0
            ? const StepStyle(
                connectorThickness: 0,
                color: Color(0xFF329e95),
                indexStyle: TextStyle(color: Colors.transparent),
              )
            : const StepStyle(
                connectorThickness: 0,
                color: Colors.transparent,
                boxShadow: BoxShadow(spreadRadius: 5),
                indexStyle: TextStyle(color: Colors.transparent),
              ),
        title: const Text(""),
        content: const SignupPersonalScreen(),
      ),
      Step(
        state: currentStep > 1 ? StepState.complete : StepState.indexed,
        isActive: currentStep >= 1,
        stepStyle: currentStep >= 1
            ? const StepStyle(
                connectorThickness: 0,
                color: Color(0xFF329e95),
                indexStyle: TextStyle(color: Colors.transparent),
              )
            : const StepStyle(
                connectorThickness: 0,
                color: Colors.white,
                boxShadow: BoxShadow(spreadRadius: 1),
                indexStyle: TextStyle(color: Colors.transparent),
              ),
        title: const Text(""),
        content: const SignupAddressScreen(),
      ),
      Step(
        state: currentStep > 2 ? StepState.complete : StepState.indexed,
        isActive: currentStep >= 2,
        stepStyle: currentStep >= 2
            ? const StepStyle(
                connectorThickness: 0,
                color: Color(0xFF329e95),
                indexStyle: TextStyle(color: Colors.transparent),
              )
            : const StepStyle(
                connectorThickness: 0,
                color: Colors.white,
                boxShadow: BoxShadow(spreadRadius: 1),
                indexStyle: TextStyle(color: Colors.transparent),
              ),
        title: const Text(""),
        content: const SignupUserScreen(),
      ),
    ];
  }
}
