import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class PhoneNumberInput extends StatefulWidget {
  final void Function(String fullNumber)? onChanged;
  final TextEditingController textController;

  const PhoneNumberInput({Key? key, this.onChanged, required this.textController}) : super(key: key);

  @override
  State<PhoneNumberInput> createState() => _PhoneNumberInputState();
}

class _PhoneNumberInputState extends State<PhoneNumberInput> {
  String _selectedCountryCode = '+966';
  final List<String> _countryCodes = ['+966', '+971', '+1', '+44', '+91'];

  void _onCountryCodeChanged(String? code) {
    if (code != null) {
      setState(() {
        _selectedCountryCode = code;
      });
      _notifyChanged();
    }
  }

  void _onPhoneChanged(String value) {
    _notifyChanged();
  }

  void _notifyChanged() {
    if (widget.onChanged != null) {
      widget.onChanged!(
        '$_selectedCountryCode${widget.textController.text}',
      );
    }
  }

  @override
  void dispose() {
    widget.textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFF4F5F7),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Row(
        children: [
          // Country Code Dropdown
          DropdownButtonHideUnderline(
            child: DropdownButton<String>(
              value: _selectedCountryCode,
              items: _countryCodes
                  .map(
                    (code) => DropdownMenuItem(
                      value: code,
                      child: code.toText16(color: AppColors.mainPurple, isBold: true),
                    ),
                  )
                  .toList(),
              onChanged: _onCountryCodeChanged,
              icon: const Icon(
                Icons.keyboard_arrow_down_rounded,
                color: AppColors.mainPurple,
              ),
            ),
          ),
          const SizedBox(width: 8),
          // Phone number input
          Expanded(
            child: TextField(
              onTapOutside: (event) {
                FocusScope.of(context).unfocus();
              },
              controller: widget.textController,
              keyboardType: TextInputType.number,
              textInputAction: TextInputAction.done,
              maxLength: 10,
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d*$')),
              ],
              decoration: const InputDecoration(
                counterStyle: TextStyle(
                  height: double.minPositive,
                ),
                counterText: "",
                hintText: '5xxxxxxxx',
                border: InputBorder.none,
                hintStyle: TextStyle(
                  color: Colors.black38,
                  letterSpacing: 2,
                ),
              ),
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                letterSpacing: 2,
                color: Colors.black,
              ),
              onChanged: _onPhoneChanged,
            ),
          ),
        ],
      ),
    );
  }
}