import 'package:flutter/material.dart';

import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../core/design/tokens.dart';

import '../../../core/l10n/l10n.dart';

import '../../../core/ui/failure_text.dart';

import '../../../core/ui/tripz_button.dart';

import '../../../core/ui/tripz_scaffold.dart';

import '../../../core/ui/tripz_text_field.dart';

import '../cubit/login_cubit.dart';

import '../cubit/login_state.dart';

import '../../../core/ui/form_header.dart';

class PhoneView extends StatelessWidget {
  const PhoneView({super.key});

  @override
  Widget build(BuildContext context) {
    final l10n = context.l10n;
    return BlocBuilder<LoginCubit, LoginState>(
      buildWhen: (p, n) =>
          p.status != n.status ||
          p.phoneError != n.phoneError ||
          p.failure != n.failure,
      builder: (context, state) {
        final cubit = context.read<LoginCubit>();
        return TripzScaffold(
          showAppBar: false,
          bottomAction: TripzButton.primary(
            label: l10n.phoneSend,
            loading: state.isSubmitting,
            onPressed: cubit.submitPhone,
          ),
          child: ListView(
            children: [
              const SizedBox(height: Space.xl),
              FormHeader(
                icon: Icons.phone_outlined,
                title: l10n.phoneTitle,
                lead: l10n.phoneLead,
              ),
              const SizedBox(height: Space.lg),
              TripzTextField.phone(
                label: l10n.phoneLabel,
                hint: l10n.phoneHint,
                enabled: !state.isSubmitting,
                onChanged: cubit.phoneChanged,
                onSubmitted: (_) => cubit.submitPhone(),
                errorText: state.phoneError == null
                    ? null
                    : ApiFailureText.phoneMessageOf(context, state.phoneError!),
              ),
              if (state.failure != null)
                ApiFailureText(failure: state.failure!),
            ],
          ),
        );
      },
    );
  }
}