import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:core_localization/core_localization.dart';
import 'package:staff_authentication/staff_authentication.dart';

/// A widget that displays the phone number input field with country code.
///
/// This widget handles its own [TextEditingController] to manage input.
class PhoneInputFormField extends StatefulWidget {
  /// The initial value for the phone number.
  final String initialValue;

  /// The error message to display, if any.
  final String error;

  /// Callback for when the text field value changes.
  final ValueChanged<String> onChanged;

  /// Creates a [PhoneInputFormField].
  const PhoneInputFormField({
    super.key,
    this.initialValue = '',
    required this.error,
    required this.onChanged,
  });

  @override
  State<PhoneInputFormField> createState() => _PhoneInputFormFieldState();
}

class _PhoneInputFormFieldState extends State<PhoneInputFormField> {
  late final TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.initialValue);
  }

  @override
  void didUpdateWidget(PhoneInputFormField oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.initialValue != oldWidget.initialValue &&
        _controller.text != widget.initialValue) {
      _controller.text = widget.initialValue;
      _controller.selection = TextSelection.fromPosition(
        TextPosition(offset: _controller.text.length),
      );
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          t.staff_authentication.phone_input.label,
          style: UiTypography.footnote1m.textSecondary,
        ),
        const SizedBox(height: UiConstants.space2),
        Row(
          children: <Widget>[
            Container(
              width: 100,
              height: 48,
              alignment: Alignment.center,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('🇺🇸', style: UiTypography.headline2m),
                  const SizedBox(width: UiConstants.space1),
                  Text('+1', style: UiTypography.body1m),
                ],
              ),
            ),
            const SizedBox(width: UiConstants.space2),
            Expanded(
              child: TextField(
                controller: _controller,
                keyboardType: TextInputType.phone,
                inputFormatters: <TextInputFormatter>[
                  FilteringTextInputFormatter.digitsOnly,
                  LengthLimitingTextInputFormatter(11),
                ],
                decoration: InputDecoration(
                  hintText: t.staff_authentication.phone_input.hint,
                ),
                onChanged: widget.onChanged,
              ),
            ),
          ],
        ),
        if (widget.error.isNotEmpty)
          Padding(
            padding: const EdgeInsets.only(top: UiConstants.space2),
            child: Text(
              translateErrorKey(widget.error),
              style: UiTypography.body2r.textError,
            ),
          ),
      ],
    );
  }
}
