import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:staff_authentication/src/presentation/blocs/auth_bloc.dart';
import 'package:staff_authentication/src/presentation/blocs/auth_event.dart';
import 'package:staff_authentication/src/presentation/blocs/auth_state.dart';
import 'phone_input/phone_input_actions.dart';
import 'phone_input/phone_input_form_field.dart';
import 'phone_input/phone_input_header.dart';

/// A widget that displays the phone number entry UI.
class PhoneInput extends StatelessWidget {
  /// The current state of the authentication process.
  final AuthState state;

  /// Callback for when the "Send Code" action is triggered.
  final VoidCallback onSendCode;

  /// Creates a [PhoneInput].
  const PhoneInput({super.key, required this.state, required this.onSendCode});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: SingleChildScrollView(
            padding: const EdgeInsets.symmetric(
              horizontal: UiConstants.space6,
              vertical: UiConstants.space8,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                const PhoneInputHeader(),
                const SizedBox(height: UiConstants.space8),
                PhoneInputFormField(
                  initialValue: state.phoneNumber,
                  error: state.errorMessage ?? '',
                  onChanged: (String value) {
                    BlocProvider.of<AuthBloc>(
                      context,
                    ).add(AuthPhoneUpdated(value));
                  },
                ),
              ],
            ),
          ),
        ),
        PhoneInputActions(isLoading: state.isLoading, onSendCode: onSendCode),
      ],
    );
  }
}
